HTML5 Canvas Free Tutorial

This tutorial is designed to help you understand functionality of HTML5 Canvas

The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. A canvas is a rectangular area and it has several methods for drawing paths, boxes, circles, characters, and adding images.

The <canvas> element is a new HTML5 markup element that allows drawing in a web page without using Document Object Model (DOM) APIs or plug-ins. Although somewhat new, the <canvas> element has been adopted by most modern browsers.

Instead of creating graphics on-screen using HTML elements and other markup with CSS styling, Canvas allows the drawing of graphics directly using JavaScript commands like drawRect, fill, and drawImage. In addition, it is possible to manipulate pixels directly to modify images and create special effects. Although Canvas is currently a 2D drawing API, 3D support is planned for future releases.

Note:

- The element has no drawing abilities of its own

- All drawing must be done inside JavaScript. By default, the element has no border and no content

- The optional fallback_content is rendered by browsers that do not support the canvas tag

- Allows drawing of graphics directly without having to resort to

or CSS tricks

- Canvas is a web standard, supported by most browsers, with compatible implementations

- The canvas is a two-dimensional grid.

- More easily hardware accelerated resulting in fast animations

- The upper-left corner of the canvas has coordinate (0,0)

- In the future, Canvas will support contexts other than ’2d’, such as the pending WebGL spec for 3D graphics.