HTML5 Canvas Element - Using 2D Drawing API

In this post I will be putting together some introductory notes on one of cool features of HTML5, CANVAS. Canvas opens up whole new dimension in some interesting presentations in web application without use of third party add on like Flash, Silverlight or some server side controls to generate images (e.g. charts).

This post will some basic use of 2D api to draw some basic shapes in Canvas element on your web page.

Canvas Element

You have to start by adding a canvas element on the page where you want to render graphics. Following snippet shows element on my demo page.

<canvas id="drawingCanvas" width="400px" height="300px"></canvas>

Check Browser Support For 2D API

Since HTML5 specification is not supported by all browsers, you want to make sure that your browser has support for it. To support drawing api (e.g. 2D), canvas has to implement getContext fuction. So we will check for it.

var canvasElem = $('#' + elemId);
if (null != canvasElem) {
// There is support for canvas api

Check For 2D Drawing API Support

[usercontrol: ~/User Controls/GoogleSquareAdUnit.ascx]

Next step is to check what kind of drawing you can perform on your canvas element. In HTML5 specification terms, you have to check what kind of context is supported. You have to call getContext method with a string parameter for type of rendering you want to perform. For example to draw 2D graphics, you will set that parameter value as '2d'. You should check return value from that function to make sure that context is actually supported. HTML5 specification states that if a given context is not supported then getContext function will return null.

var canvasElem = $('#' + elemId);
if (null != canvasElem) {
  if (canvasElem[0].getContext) {
     var drawCtx = canvasElem[0].getContext('2d');
       if (null != drawCtx) {
        // We can use 2d api

Draw Some Basic Shapes

Here are some example on drawing some basic shapes.

How to draw filled rectangle

You will use fillRect function to draw a filled rectangle. This function takes 4 parameters as shown in function signature below.

fillRect(x, y, width, height)

Next question you have in mind is how do you specify color to use for filling. This is done by using fillStyle function. Basic use of this function is to set color value to this property. Following code snippet shows how to draw four filled rectangles with 2 colors as shown in the screenshot.

// Draw 4 rectanlges
drawCtx.fillStyle = "#4e3";
drawCtx.fillRect(0, 0, 100, 75);
drawCtx.fillRect(100, 75, 100, 75);
drawCtx.fillStyle = "#e13";
drawCtx.fillRect(100, 0, 100, 75);
drawCtx.fillRect(0, 75, 100, 75);

How to draw lines

Use will use lineTo function to draw a line. As function name suggests that parameters for this function specify end point for the line. Now you are wondering how to specify start point for the line. Rendering API has concept of path. You use moveTo function to move start point of path to that specified point. And then lineTo function will draw line from moveTo point to lineTo point. Untill you use beingPath function, subsequent calls to lineTo function calls will use last point as start point. Following code snippet shows drawing two lines across diagonals.

// Draw lines across diagonals
drawCtx.moveTo(0, 0);
drawCtx.lineTo(200, 150);
// now set stroke color to blue.
drawCtx.strokeStyle = "#00f";
drawCtx.moveTo(0, 150);
drawCtx.lineTo(200, 0);

How to draw circle

Similar to drawing a line, you will use arcTo function to draw an arc. A circle is special case of an arc where start angle is 0 and end angle is 360 degree. Following code snippet shows drawing of a circle in middle of rectangle as shown in screenshot.

// Draw a circle.
drawCtx.lineWidth = 3;
drawCtx.strokeStyle = "#ff0";
drawCtx.arc(100, 75, 50, 0, Math.PI * 2, true);

These are just some basic examples of 2D api. In subsequent posts I will show some interesting usage of various 2D api functions to perform some cool rendering on pages.




24.1 °C / 75.5 °F

weather conditions Clouds

Monthly Posts

Blog Tags