Scribd
Upload
285 views

HTML5 Canvas

HTML5 Canvas

Uploaded by

oskandaria
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
285 views

HTML5 Canvas

HTML5 Canvas

Uploaded by

oskandaria
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Copyright tutorialspoint.

com

HTML5 - Canvas

Advertisements

HTML5 element <canvas> gives you an easy and powerful way to draw graphics using JavaScript. It can be used to draw graphs, make photo compositions or do simple (and not so simple) animations. Here is a simple <canvas> element which has only two specific attributes width and height plus all the core HTML5 attributes like id, name and class etc.

< c a n v a si d = " m y c a n v a s "w i d t h = " 1 0 0 "h e i g h t = " 1 0 0 " > < / c a n v a s >
You can easily find that <canvas> element in the DOM using getElementById() method as follows:

v a rc a n v a s =d o c u m e n t . g e t E l e m e n t B y I d ( " m y c a n v a s " ) ;
Let us see a simple example on using <canvas> element in HTML5 document.

< ! D O C T Y P EH T M L > < h t m l > < h e a d > < s t y l e > # m y c a n v a s { b o r d e r : 1 p xs o l i dr e d ; } < / s t y l e > < / h e a d > < b o d y > < c a n v a si d = " m y c a n v a s "w i d t h = " 1 0 0 "h e i g h t = " 1 0 0 " > < / c a n v a s > < / b o d y > < / h t m l >
To learn above concept - Do Online Practice using latest version of either Safari or Opera.

The Rendering Context:


The <canvas> is initially blank, and to display something, a script first needs to access the rendering context and draw on it. The canvas element has a DOM method called getContext, used to obtain the rendering context and its drawing functions. This function takes one parameter, the type of context 2d. Following is the code to get required context along with a check if your browser supports <canvas> element:

v a rc a n v a s =d o c u m e n t . g e t E l e m e n t B y I d ( " m y c a n v a s " ) ;

i f( c a n v a s . g e t C o n t e x t ) { v a rc t x=c a n v a s . g e t C o n t e x t ( ' 2 d ' ) ; / /d r a w i n gc o d eh e r e }e l s e{ / /c a n v a s u n s u p p o r t e dc o d eh e r e }

Browser Support
The latest versions of Firefox, Safari, Chrome and Opera all support for HTML5 Canvas but IE8 does not support canvas natively. You can use ExplorerCanvas to have canvas support through Internet Explorer. You just need to include this javascript as follows:

< ! [ i fI E ] > < s c r i p ts r c = " e x c a n v a s . j s " > < / s c r i p t > < ! [ e n d i f ] >

HTML5 Canvas Examples:


This tutorial covers following examples related to HTML5 <canvas> element. Examples Drawing Rectangles Description Learn how to draw rectangle using HTML5 <canvas> element

Drawing Paths

Learn how to make shapes using paths in HTML5 <canvas> element

Drawing Lines

Learn how to draw lines using HTML5 <canvas> element

Drawing Bezier

Learn how to draw bezier curve using HTML5 <canvas> element

Drawing Quadratic

Learn how to draw quadratic curve using HTML5 <canvas> element

Using Images

Learn how to use images with HTML5 <canvas> element

Create Gradients

Learn how to create gradients using HTML5 <canvas> element

Styles and Colors

Learn how to apply styles and colors using HTML5 <canvas> element

Text and Fonts

Learn how to draw amazing text using different fonts and their size.

Pattern and Shadow

Learn how to draw different patterns and drop shadows.

Canvas States

Learn how to save and restore canvas states while doing complex drawings on a canvas.

Canvas Translation

This method is used to move the canvas and its origin to a different point in the grid.

Canvas Rotation

This method is used to rotate the canvas around the current origin.

Canvas Scaling

This method is used to increase or decrease the units in a canvas grid.

Canvas Transform

These methods allow modifications directly to the transformation matrix.

Canvas Composition

This method is used to mask off certain areas or clear sections from the canvas.

Canvas Animation

Learn how to create basic animation using HTML5 canvas and Javascript.

Copyright tutorialspoint.com

You might also like