Canvas, a Native Drawing Mechanism in HTML5

All of us know that HTML5 will be the new standard for HTML on the World Wide Web. It’s still a work in progress, but even now it’s packed with many new syntactical features.

Canvas is one of the coolest ones. As the name infers the Canvas tag provides us with a lot of new drawing possibilities. You can even draw graphics on the fly on your webpage. And you don’t need any third party plugins to render and present the drawing. What the Canvas element allows is scriptable rendering of 2D shapes and bitmap images. By applying little imagination and coding, you can now create graphs, animations, games, and image compositions using the inherent power of this element.

Canvas provides a “drawable” region within the HTML code, and its contents are rendered with JavaScript. So although the element provides, well, the canvas, it’s necessary to use the Javascript to draw the graphics. Here’s a quick basic example:

You can use a “context” for each canvas element and use JavaScript commands to draw anything you want. Take a look at this recent blog post to see 16 incredible examples of the canvas tag in action. Browsers can implement multiple canvas contexts and different APIs to provide the drawing functionality.

Speaking of browsers, it’s important to mention most of the major browsers include the 2D canvas context capabilities. List of some major supported browsers is as following:

• Internet Explorer (9.0+)
• Safari (3.0+)
• Firefox (3.0+),
• Chrome (3.0+)
• Opera (10.0+),
• iOS (1.0+),
• and Android (1.0+)

In addition, there are some experimental builds of Opera that include support for a 3D canvas context, and an add-on that allows 3D canvas support in Firefox.

To sum it up, Canvas is very powerful, easy to use, HTML drawing board to create amazing graphics. Using the canvas element isn't very difficult, but you do need a basic understanding of HTML and JavaScript.