How to Include Images on Your Web Page with HTML5 Canvas - dummies

How to Include Images on Your Web Page with HTML5 Canvas

By Andy Harris

While HTML has long had support for images, the canvas interface of HTML5 adds new life to Web images. Images can be displayed inside a canvas, where they can be integrated with the vector-drawing techniques of the canvas API. You can also select a portion of an image to display, and apply various transformations to your image to create interesting compositions and animations.

This figure shows an image drawn twice on a canvas element.


Drawing an image on the HTML5 canvas

The easiest way to use an image in a canvas element is to use an image already available on the Web page. You can put an image on the page with the ordinary <img> tag and use the CSS display: none rule to make the image invisible. An alternate approach is to create an Image object in JavaScript and apply the src attribute to connect that image to a specific image file. For examples of both techniques, consider the following HTML code:

  <img class = "hidden"
       id = "goofyPic"
       src = "andyGoofy.gif"
       alt = "Goofy pic of me" />
  <canvas id = "drawing"
          height = "400"
          width = "400">
    <p>Canvas not supported</p>

The following JavaScript code displays the image in the canvas:

  function draw(){
    var drawing = document.getElementById("drawing");
    var con = drawing.getContext("2d");
    var goofyPic = document.getElementById("goofyPic");
    con.drawImage(goofyPic, 0, 0, 50, 50);
    var image2 = new Image();
    image2.src = "andyGoofy.gif";
    con.drawImage(image2, 100, 100, 70, 50);
  } // end draw

Here’s how to do it:

  1. Create the image in the main page.

    The easiest way to access an image is to use ordinary HTML to embed the image in the main page. If you want, you can hide the <img> tag with CSS code (display: none) so that only the version in the canvas is visible.

  2. Create a JavaScript variable for the image with the document.getElementByID() mechanism.

  3. Draw the image on the canvas with the drawImage() function.

    The first of the five parameters is the name of an image object. (It must be the name of a JavaScript image object, not just the file name of an image.) The next two parameters are the X and Y values of the top-left corner of the image, and the last two parameters are the size of the image (width and height).

  4. Create a JavaScript Image object.

    If you don’t want to embed an image in the page, you can use JavaScript to create an image dynamically. Use the new Image() constructor to build a new image.

  5. Change the image’s src property.

    If you create a JavaScript image, you must specify the src attribute to indicate the file associated with the image. It might take some time for the image to load.

The image won’t display until it has loaded from the server. In most cases, this won’t be a problem, but sometimes you need to delay your program until the image has finished loading. The Image object has an onload property that accepts a callback function. Use this technique to wait until your drawing finishes:

image.onload = finishDrawing;
function finishDrawing(){
 //rest of drawing code goes here

Drawing part of an image on the HTML5 canvas

Sometimes you want to draw a small part of the original image. A program that focuses in on the center of the goofy face looks like this:


It’s quite easy to draw part of an image. Use the same drawImage() command, but this time use a version with nine parameters:

    con.drawImage(goofyPic, 60, 70, 90, 90, 0, 0, 150, 150);

Here’s what all these parameters mean:

  • Image name: The first parameter is the image object (not the filename, but the name of the JavaScript Image object).

  • Top-left corner of source: The first job is to choose the part of the original picture to display. The next two parameters indicate the top-left corner of a selection on the original picture. (You might use an image editor like Gimp or IrfanView to determine the selection position and size.)

  • Height and width of source: The next two parameters indicate the height and width of the source selection.

  • Position of destination: The next two parameters are the position of the picture’s top-left corner on the canvas.

  • Size of destination: The last two parameters describe the height and width of the destination image on the canvas.

The subimage technique described here is quite useful because it allows you to combine several images into a single image (sometimes called a sprite sheet). This decreases the overhead for delivering the image. (One large image is faster to deliver than several small ones.) It’s also frequently used in games and animations where one entity might have several images displayed in sequence to suggest walking or attacking.