HTML5 introduction to canvas beginner tutorial


Following up from my previous post in which we talked about new form input types and attributes that you should know, this post is just a brief introduction to new HTML5 element called

canvas is an element to which we can draw shapes, text and do various advanced things through JavaScript API. Canvas is an immediate mode bit mapped area of the screen that can be manipulated through JavaScript API. Immediate mode in my reference above refers to the way the canvas renders pixels on the screen. When you draw anything on canvas it redraws everything on every action we take through JavaScript API calls.

We can draw shapes like arc, line, curves etc.  canvas uses a grid system where every pixel on a drawing area is available through x,y coordinates. The grid looks like one shown below for a 200X200 canvas.

Canvas Grid

So as you can see that how x and y coordinates are mapped.
x value increase from left to right
y value increase from top to bottom ↓

Before we go ahead I would like to make a point here. If you are not comfortable with JavaScript then maybe a good introductory JavaScript tutorial is something I would recommend.

Please note that most of my examples will work on all browsers but the code is primarily tested on Google Chrome. I recommend to use the latest version of your favourite browser. IE8 or older does not support canvas

Problem: A canvas with text “Hello canvas” with some styling

3 important properties/attributes for canvas are as follows

  1. id: Used to reference and get hold of through javascript
  2. width: width of your canvas
  3. height: height of your canvas

The mark for our example

As you see that we have created our canvas element. I hope that you remember noscript tag and the way we pass on a message to the user in case script tag was not supported. We can do exact same thing with canvastoo. As you can see from our demo markup that I have left a string “Your browser does not support HTML5 Canvas.” which will be display if canvas is not supported by your browser. tag will be processed just as normal tag without any special meaning given to it.

Before we go any further we will add simple style to our canvas


The Javascript

While my html5 oriented posts and all other on this blog are usually problem/solution posts so this is no different. So rather than wasting time we jump in straight to action. First we get hold of canvas element as shown below

Now we need to make sure that our browser support canvas, so we will add this condition for rest of our code snippet

As discussed in one of my previous post that we can use Modernizr framework too to detect canvas support as shown below

Now that we know that canvas is supported we need to get 2D (2 dimensional) context of our drawing board and start pushing commands to it. as shown below


Canvas Example 1



Demo for above code is located here

Ok so in this post we touched base on basic usage of canvas we will be looking for more advanced use in several posts to come. We will touch base on important properties of canvas object and functions so stay tuned.

If you find any problem with this article please leave your comment.

I hope that this helps.



Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.