How to Draw on Your Web Page with the HTML5 <canvas> Tag - dummies

How to Draw on Your Web Page with the HTML5 <canvas> Tag

By Andy Harris

The <canvas> tag sets up a portion of the screen to be used as a canvas for program-controlled graphics. JavaScript code executes all the drawing and manipulation of the image. The following code sets up a canvas element and provides a button.

  <canvas id = "myCanvas"
          width = "300"
          height = "200">
    This example requires HTML5 canvas support
  <button type = "button"
          onclick = "draw()">
    click me to see a drawing

The canvas element does little on its own, you have to use JavaScript to extract a drawing context (a special element that can be drawn on) and use the methods of that context object to create dynamic graphics. For example, to enable the draw()function when the user clicks the button, use this code:

     function draw(){
      var myCanvas = document.getElementById("myCanvas");
      var context = myCanvas.getContext("2d");
      context.fillStyle = "blue";
      context.strokeStyle = "red";
      circle(context, 1, 1, 1);
      for (i = 1; i <= 200; i+= 2){      
        circle(context, i, i, i, "blue");
        circle(context, 300-i, 200-i, i, "red");
        circle(context, 300-i, i, i, "blue");
        circle(context, i, 200-i, i, "red");
      } // end for  
    } // end draw
    function circle(context, x, y, radius, color){
      context.strokeStyle = color;
      context.arc(x, y, radius, 0, Math.PI * 2, true);
    } // end circle

The output of this canvas draw code looks like this:


Most modern browsers support some form of the canvas tag directly. At the moment, only a 2D drawing context is available, but eventually you’ll be able to create 3D graphics directly in the browser.

The context object controls all the actual drawing functionality. A few of the main methods of the context object include:

  • arc(): Draws an arc (portion of a circle) as part of a path. The arc is defined like a circle, with a center and radius, but also with beginning and ending angles. If the angles describe a full circle (0 to 2 times pi radians), the arc command will draw a full circle.

  • beginPath(): Begins the definition of a path. Normally a path is defined by a single moveTo command, followed by a series of lineTo commands, and finished by a stroke, closePath, or fill.

  • closePath(): Connects the last point of a path (drawn with moveTo and lineTo commands) to the first, creating a closed shape that can be filled.

  • drawImage(): Allows you to draw an image (from an external image file) on the canvas. Many implementations allow pixel-level manipulation, allowing you to apply custom filters and transformations to your images, which allows far more control than the typical <img> tag.

  • fill(): This command (and its variants, such as fillRect) allows you to apply the current fill style to elements drawn on the screen.

  • fillRect(): Builds a rectangle of a specified size and position, filled in with the current fill style.

  • fillStyle(): Allows you to specify the fill style. This can be a standard color value or a predefined gradient.

  • lineTo(): Along with the moveTo command, this allows you to build a path on the screen. The lineTo command takes a point as input and draws from a previously defined point to the current point. Note that the path is not displayed until the application of the stroke function.

  • lineWidth(): This defines the width of the line being drawn by a stroke command.

  • moveTo: Used in path definition to indicate the starting point of a path.

  • stroke(): Draws the currently defined path. Note that paths are not immediately drawn; the stroke command actually draws the path on the screen.

  • strokeRect(): Draws an unfilled rectangle.

  • strokeStyle(): Determines the style of the next stroke to be drawn. Most drawing contexts support dotted and dashed stroke styles, but more are expected.

  • text: Some implementations of the canvas tag allow for text manipulation. This support is uneven, but it is likely to become common in future implementations.

The canvas tag is one of the most important new features of HTML5, as it allows nearly unlimited control of the visual interface. Game developers have begun creating online games using the canvas, and it has already become the basis of several innovative user interface experiments (notably Google maps).