HTML5 Canvas Intro
Use a resolution dependent bitmap canvas to draw graphics on the fly.
HTML5 Canvas Element.
1.One of the most important elements introduced by HTML5 is the <canvas> element. It creates a 2d Canvas API(Application Programming Interface).
3.The default size of the canvas is 300 x 150(width * length).However, you can define custom size and other attributes for the canvas element.NOTE-The <canvas> element was first introduced by Apple Inc while developing dashboard widgets for Safari in July 2004.
Browser Support for HTML5 Canvas Element.
1.The <canvas> element is supported on latest versions of all major browsers.
Internet Explorer, Apple Safari, Mozilla Firefox, Opera , Google Chrome.NOTE-Internet explorer 9 supports HTML5 canvas, earlier versions don't.
Create a 2d Canvas.
Think of a Canvas as a 2D paper sheet upon which graphics, lines, shapes etc can be drawn with precision.
2.Create a canvas markup with three attributes id,width,height.
width and height: Defines the dimensions of the canvas.
3.The canvas is initially blank, borderless and transparent.You can use CSS
border property to define background and border respectively.
Example:A basic Canvas Demo.Give it a TRY! » NOTE-Always define the height and width through canvas attributes and not using CSS.
The Canvas Context Object.
1.After creating a canvas we need to draw on it,for that we need a context object which will draw graphics on the canvas.
2.The Canvas element's specifications are designed to handle both 2D and 3D drawing context.Currently support is available for 2D context only, 3D context are in very nacent stage(eg WebGL) but will be available in the future.