Tuesday , 18 June 2019
Home / Programming / JavaScript / Drawing Images – Advanced JavaScript Tutorial
Drawing Images
Drawing Images

Drawing Images – Advanced JavaScript Tutorial

If you would like to add your own images into the canvas, then you only have to write a couple lines of code to do so. There are a couple of ways of drawing images onto the canvas, but we’ll be using 1 way which is the image object. Please feel free to download the images I use in this tutorial by downloading the source code at the end of this tutorial.

Clear your script and add this bit of code.

Everything should be familiar except the Image object. The Image object is an object that allows you load images in JavaScript. It doesn’t load it into the document, but once you grab an image, then you’re allowed to add it into the document or in a canvas.

The Image object comes with a couple of properties and methods, but the 2 important ones are the src property and the load event.

Add these lines of code after the creation of our image object.

First things first, we set the src property to the location of our image. You should notice that we’re loading the image relative to the HTML document. Our script is located in the js folder, but our document is in the root of our server. When scripts are loaded to the document, then that document becomes the starting point for your script. So, you have to make sure you load files relative to the document and not the script.

Next, we use the onload event. Depending on the image, you can’t just right away add it to the canvas. You have to wait for it to completely load or you’ll get an error. In our anonymous function, we simply add the image to our canvas by using the drawImage() method.

This method has NINE parameters. The first 3 are required. The first parameter is the image you want to load. The second parameter is the x position the image should be loaded in. The third parameter is the y position the image should be loaded in.

Let’s take a look at the next 6 parameters. Update the drawImage() method to this.

The fourth parameter will be the width of the image. The fifth parameter will the height of the image. The sixth parameter is the destination x position. The seventh parameter is the destination y position. The eighth parameter is the destination width. The ninth parameter is the destination height.


You get a lot of flexibility when it comes to drawing images onto your canvas. For more information on the Image Object, then go here.


I’ve included the images for this tutorial here. Feel free to use them anyway you like.

About Jasko Koyn

Check Also


Audio – Advanced JavaScript Tutorial

The video and audio objects both have the same events, properties and methods. So, you …

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.