Loading An Image Into An HTML5 Canvas

As part of my Draw Something Solver, I need to be able to load an image into an HTML 5 Canvas. I thought I’d share the solution to help others.

Firstly, assume you have an HTML page with an empty canvas element called drawsomething. Secondly, assume the image you want to load is next to the HTML page and is called testimage.png.

I’m not usng a framework like jQuery in this example, so the code may a bit verbose.

Firstly, you want the code to run when the page has finished loading, the easiest way to do this is to tie into the window.onload event. If yoou were using jQuery or similar, ready would be a good point to use.

window.onload = function() {
  // code goes here
}

Now we need to get the canvas element and it’s context. We can do this with the following code.

var dsCanvas = document.getElementById('drawsomething');
var dsCanvasContext = dsCanvas.getContext('2d');

We need an Image object to load the image into…

var screenshotImage = new Image();

When the image has been loaded, we need to draw it into the canvas. Do to this we can hook into the image objects onload event and place our canvas manipulation code into an anonymous function that is called when the event triggers.

Inside the anonymous function, we resize the canvas to the same size as the image and call the canvas context’s drawImage() method, passing in the image, it’s start x and y coordinates, and the width and height of the image.

screenshotImage.onload = function() {
  dsCanvas.width = screenshotImage.width;
  dsCanvas.height = screenshotImage.height;
  dsCanvasContext.drawImage(screenshotImage,0,0,screenshotImage.width, screenshotImage.height);
}

Finally, we assign a filename to the image object’s src attribute. This will cause the image object to load the image, and when loaded it will trigger the onload event we have just written to draw the image into the canvas.

screenshotImage.src = "testimage.png";

The complete example looks like this…

window.onload = function() {
  var dsCanvas = document.getElementById('drawsomething');
  var dsCanvasContext = dsCanvas.getContext('2d');
  var screenshotImage = new Image();
  screenshotImage.onload = function() {
    dsCanvas.width = screenshotImage.width;
    dsCanvas.height = screenshotImage.height;
    dsCanvasContext.drawImage(screenshotImage,0,0,screenshotImage.width, screenshotImage.height);
  }
  screenshotImage.src = "testimage.png";
}

Next time, I will look at how to manipulate the image that has just been loaded into the canvas.