Use images in the Canvas

Draw image content on HTML 5 canvas elements, using any allowed graphic file type (gif, jpg, png) to include an image on a canvas canvas.

One of the most interesting things that we can do when we draw on the canvas of the canvas element is to directly import and display the content of external graphic files, that is, use GIF, JPG or PNG images within the drawings that we make with canvas. In this article we will see how to do this point, although we anticipate that it is quite easy.

We can create the images from graphic files with our favorite editor and easily make quite creative and colorful graphics, or edit from photos created with our camera. Then we can include them in the Canvas and thus achieve that our works have a better quality than if we drew by hand with the Javascript functions of the Canvas API.

With a little creativity and some Javascript code, we can make compositions based on several images “pasted” on the canvas, or use background images that we then paint over with Javascript to highlight things. Since we can use any type of graphic file, as long as it is supported by the browser, the possibilities are enormous.

Reference: To understand this article you must have followed the explanations published in .com.

drawImage() method to paint an image on the canvas

To draw an image on the canvas, use the drawImage() Method, which belongs to the canvas context object, with the following syntax:

drawImage(image_object, x, y)

We send three parameters, the first is the Javascript object of the image to be included in the canvas. The next two are the coordinates where to place the image, being (x,y) the point where the upper left corner of the image will be placed.

As I said, this method belongs to the canvas object, so before we can call it we must have obtained the canvas context, as we have learned previously in the for any other type of drawing.

javascript image object

The image object is one of the basic Javascript objects, which luckily works the same in all browsers. In fact, we have already explained it in previous articles within .com. Specifically, we recommend the .

We can obtain this image object in several ways, but for now we are going to learn how to generate it dynamically with a Javascript instruction.

var img = new Image();

With this we have a variable called “img” that has an image object inside it. That image object is currently without any attributes. We could say that it is uninitialized. The fundamental initialization task would be to assign a path to a graphic file.

img.src=”/articles/logo-grande.jpg”;

This causes the Image object to load the image that is in the file “/articles/logo-grande.jpg” and since we have not specified any directory in the path, it is assumed that this file is in the same folder as the HTML file where that Javascript code is.

Once we have the image object, we could paint it on a canvas using the drawImage() function. It would be something similar to this:

ctx.drawImage(img, 10, 10);

But be careful, because this code has a detail: the image will not be drawn on the canvas unless it is previously loaded in the browser.

In the script, as we have it now:

var img = new Image(); img.src=”/articles/logo-grande.jpg”; ctx.drawImage(img, 10, 10);

The browser when specifying the image file, updating the src attribute, has to download it and that takes a while. Therefore, if immediately to indicate the file, we try to draw the image, it will give a problem. In other words, we can only draw the image when we are sure that the browser has already downloaded it. To make sure of this point, we can use the image’s onload event, to call drawImage() only when the image has finished loading.

var img = new Image(); img.src=”/articles/canvas-html5.png”; img.onload = function(){ ctx.drawImage(img, 10, 10); }

Example of drawing an image on a canvas

We will see below the complete code of an example that loads an image in a canvas element.

Your browser does not support canvas.

Can .

In the next article we are going to show several ways to access Image objects from Javascript to display those images on the canvas.