Programming Basics: A website for teaching people how to program
Do your programming with [jsbin] or [Orion]

Computer Graphics with HTML5 Canvas and JavaScript: Drawing Images

Drawing is hard. Even though we now know how to draw line and shapes, it's really hard to draw something like the Mona Lisa. One easy way to solve this problem is to just take a picture of the Mona Lisa and put it directly into our pictures.

And here is a program that does that. The program uses something called images which is just another way of saying picture. We get an image or picture from somewhere else and draw it onto our canvas. There is a lot of code here, so it can be a little confusing. To understand this program, you should think about it as three different parts.

At the very top of your program, you need to write these things.

At the very bottom of your program, you need to have these things.

And then in the middle you have your actual commands for drawing the Mona Lisa.

So let's see what these commands do.

The first command creates a new image and gives it the name A. So this image A is the picture we eventually want to draw on our canvas.

Then we say which image we want to use. Here, we are telling the computer to use a picture of the Mona Lisa from the Internet. This messy set of letters is the location or address of a picture on the Internet. It's just like the web address that's always at the top of your web browser.

Then we need to wait a bit. The computer needs to go to the Internet and grab the image, and that takes a little bit of time. So you have to wait a little bit before the computer is able to draw them.

And then you tell the computer to actually draw this image. Here we use the drawImage() command. We write c.drawImage, then A, the name of the image that we loaded, and then the position of where to draw it.

And with that the computer will draw the Mona Lisa. Now, I know this program is rather complicated. To help you understand it, I'm going to show you how you can modify the program in different ways to do different things with images.

Let's say that we don't want to draw an image of the Mona Lisa. Let's say we want to use a different picture instead. All we have to do is change this address of which picture we want to use. Right now, we're using a file called mona.jpg.

If we want a different picture, we can cross out the mona.jpg,

And put in the address of a different picture file. Here we'll use ele.png, which is the address of an elephant picture.

So now the computer won't draw the Mona Lisa. It will draw an elephant instead.

Let's say we want to draw this elephant in a different place on the screen.

To do that, you have to modify this line of the program where you draw the image on the screen. What you want to do is just change the position of the elephant to somewhere else.

So right now, we draw the elephant at position 100,50. The means that if you start in the upper-left, the elephant is 100 pixels to the right,

and then 50 pixels down.

If we were, to say, change the 50 to a 90,

the elephant would be drawn further down on the screen.

Finally, what do we do if we want to have two different images?

To do that, we first take this code, which creates an image with the elephant picture.

Then, we'll make a copy of that code. But you have to change some things in the copy. In the original code we made a new image and we named it A. For our second image, we'll name it B instead. And we don't want to use the same elephant picture. Instead we'll use the Mona Lisa picture from before.

Then we'll take the command for actually drawing the elephant.

And we'll make a copy of that code as well. But instead of using image A, which is for the elephant picture, we'll use image B, which is for the Mona Lisa picture.

So now we have two different pictures on our computer screen.

Sometimes when you run these programs for the first time, the computer won't draw anything on the screen. This happens because when we told the computer to wait, we didn't wait long enough for the computer to finish loading in all the pictures. If that happens, you can click on this run button, and the computer will try loading the pictures and drawing things a second time.

So go ahead and try drawing some images on your computer screen. Remember that your program has to have three parts: you need some code at the beginning of your program for loading the images, you need this funny symbol at the end of your program, then you have your actual program in the middle with your c.drawImage() for actually drawing things. So far I've only shown you the elephant and Mona Lisa pictures, but here I've put up some other pictures on the Internet that you can use in your programs as well. For example, if you want to draw a dog instead of the Mona Lisa, you just replace the name of the file mona.jpg with dog.png instead.

Do your programming with [jsbin] or [Orion]

Programming Basics

E-mail | About | Privacy Policy