HTML5 Tutorial - Canvas

Canvas

Canvas

One of the hottest subjects in HTML5 is Canvas, but what exactly a Canvas is?

Canvas is an extremely heavy-duty plain-woven fabric used for making sails, tents, marquees, backpacks, and other items for which sturdiness is required. It is also popularly used by artists as a painting surface, typically stretched across a wooden frame. ~ Wikipedia

Perhaps that is not the answer that you are seeking. In fact, the HTML5 Canvas is mimicking the physical canvas that is used by artist.

A canvas is just blank space with no color (not even white), and javascript being the pencil and paint brush that going to turn a blank sheet into a piece of art.

Of course, the existence of canvas does not meant for just still image. Still image can be easily handled by decade-old "img" element. With the infamous javascript as your paint brush, you can create very promising animation or even interative games (here is a HTML5 Canvas showcase Pirates love Daisies)

If you have created some great flash animation before and you hope to create a HTML5 version, there are tools out there which can help you to accomplish that.

One of them are Flash to HTML5.

HTML5 Canvas is a very big subject, it is big enough for you write a book with. It is not my intention to cover every single detail of Canvas in this tutorial. This is just a brief introduction of Canvas. Remember,it is just the begining.

To create a canvas, the HTML code is simply

<canvas width="200" height="200"></canvas>

However, a borderless canvas is very much an invisible object. It takes up space but you don't see it. Let's add a border style and use a ID for reference. The purpose of ID is to make it accessible using DOM (Document Object Model). Without reference of ID, javascript (in this case like your paint brush) will have no idea which canvas to paint.

<canvas id="Canvas1" width="200" height="200" style="border:solid 1px #000000"></canvas>
No canvas support

If you see a skull with cross bones above instead of just a solid line square box, it means your web browser doesn't support Canvas. You may want to download a web browsers that work with Canvas as shown below.

BrowsersBasic Canvas Support
IE 7✓ (requires ExplorerCanvas)
IE 9 Beta
Firefox 3.0
Safari 3.0
Chrome 3.0
Opera 10