The Merriam Webster dictionary defines canvas as follows:

Canvas, noun \’kan-vəs\

: a strong, rough cloth that is used to make bags, tents, sails, etc.

: a specially prepared piece of cloth on which a picture can be painted by an artist

: a painting made on a piece of cloth

However, any web designer can tell you that canvas is something much more. The HTML5 <canvas> element is defined as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.”

More to the point, a canvas element is basically a rectangular area in your web page where you are free to employ JavaScript for drawing anything you want to. On its own, a canvas element isn’t anything special, more accurately, it’s nothing, the element doesn’t have content of its own. All the magic happens as soon as you find a canvas element in the DOM and access its drawing context.

Frist thing’s first, when calling the getContext() method for your canvas elements you have to always remember to pass the string “2d”. As we speak HTML5 does not offer a 3D canvas, but some vendors are working on 3 dimensional canvas APIs and the HTML5 specs say that a future version of the specification will probably define a 3D context, so the hope is still alive.

Canvas actually has a rather long running history, first making an appearance after Netscape version 7.2 and then going on to being supported on early versions of Safari, Mozilla and Chrome. Take a look at is full evolution right here: http://www.evolutionoftheweb.com.

So, let’s run down a few Canvas basics:

– You can reset your canvas content by simply setting its width or height, you don’t even need to change the value, just attribute it to itself and you’re good to go;

– Your canvas is a two dimensional grid and its (0,0) coordinate is at the upper left corner of the canvas, X increases to the right and Y downwards;

– Canvas allows you to both draw simple lines within it as well as going all fancy by drawing text within your canvas, but remember text is tricky to draw, but drawing it allows you to represent any Unicode character you may choose. Check out the HTML5 specification for explanations on different text baselines;

– Canvas allows the use of gradients and the drawing of actual images, here are some of the most ridiculous HTML5 Canvas experiments so far.

If all of this is new to you or you’ve been amongst the crowd defending Flash up until now, you might like to check out your first tutorial on HTML5 Canvas right here: http://www.html5canvastutorials.com.

What’s more, since compatibility is a thorny issue in all web designer’s and developer’s…sensitive areas, you should be aware that most modern browsers fully support the canvas tag and even IE is able to handle it on versions higher than and including 7, look for details about it right here: Can I use Canvas?