HTML BEGINS..









LIST & LINKS






TEXT & DIVs







IMAGES





MULTIMEDIA








TABLES



FORMS






CANVAS



















DRAG DROP API



WEB-WORKERS



GEOLOCATION



SVG & MATHML





WEB SOCKETS



HTML5 APPLICATIONS





ENTITIES Ref








REFERENCES













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).

2.Using Javascript on this 2-Dimensional resolution dependent bitmap canvas we draw graphics,charts, animations etc on the fly.

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.

Compatible Browsers.

internetexplorer safari firefox opera chrome


Internet Explorer, Apple Safari, Mozilla Firefox, Opera , Google Chrome.

NOTE-Internet explorer 9 supports HTML5 canvas, earlier versions don't.

Create a 2d Canvas.

Canvas not supported

Think of a Canvas as a 2D paper sheet upon which graphics, lines, shapes etc can be drawn with precision.


1.Canvas element will create you a empty canvas(or a container), the graphics part will be done by the javascript.

2.Create a canvas markup with three attributes id,width,height.

id:Attribute allotes a unique id to the canvas element using this id javascript will render graphics.

width and height: Defines the dimensions of the canvas.

3.The canvas is initially blank, borderless and transparent.You can use CSS background-color and border property to define background and border respectively.

Syntax:Canvas Element.

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.

Syntax: Context Object.

Example: 2D drawing Context

Give it a TRY! »



Related Examples

Related Tags