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

Computer Animation with HTML5 Canvas and JavaScript: Images Review

Welcome to my talk on animation using html5 canvas. This is a continuation of my previous talk on how to draw things using html5 canvas. As before, we're going to be programming during this talk, and you need to go to the website listed here in order to get the tools that you need to do this programming. These rools only work on modern web browsers like Google Chrome, Firefox, or recent versions of Internet Explorer. If you have an older version of Intenet Explorer, the tools will not work. You should download one of these other web browsers instead.

Here are the topics that are going to be covered during this tutorial. The main topics we're going to cover are on the left, but I'll also be covering some optional topics that touch on some more advanced material. If you don't understand this more advanced material, that's totally fine. Those topics are optional, so you can skip them and just follow the main topics.

We are going to do some programming during this talk. This talk uses the programming tool jsbin. To use the jsbin tool just go to the jsbin website listed on this slide.

In the previous lesson, I showed you how to draw images on your computer using html5 canvas. I'll be reviewing the material again because it's very important that you understand how to draw images in order to follow along with these lessons. So here's a program that draws a picture of the Mona Lisa on your screen. It has three parts.

At the top, it has some code that actually loads the image from the Internet.

You have this little piece of the end that you always need at the end of your program.

And then you have the main part of your program in the middle which actually draws the Mona Lisa up on your screen.

So let's review again how this program works. In the first line of the program, we create a new image and call it the letter A.

Then in the second line of the program, we tell the computer that we want to load the image from the Internet. This funny string of characters here is an internet address that refers to this mona.jpg image which is a picture of the Mona Lisa.

Then we tell the computer to wait a bit. Sometimes it takes a few moments for the computer to load a picture from the Internet, so you need to have this wait to ensure that the computer fully loads those images so that it is able to display them on the screen.

Then here we have the main program which actually draws our picture onto the screen. It draws the image A on the screen, and A refers to the Mona Lisa picture we loaded from the Internet.

If you want to drive different picture, all we have to do is change the address of the picture that we load into the image. So if you where we load the Mona Lisa image from the website. If you want to load a different image, we just cross out the address, and put in the address of a different image.

In this case, we'll use this ele.png image, which is a picture of an elephant.

If you want to, it's easy to use any image you find on the Internet in your programs. You can use Google Images or Bing images to find a picture that you like. Then, just right-click on it (or if you have a Macintosh, you need to hold down the control key and then click on the picture). Then a menu will come up with different options. You then need to choose the option for copying the image, but the name of that option is different for different web browsers. It might be called Copy Image URL, Copy Image Location, or Copy Address. If you are using Internet Explorer, you actually need to choose the Properties option, which brings up a Properties dialog box, then you need to highlight the address, right click that, and choose the Copy option from the menu that appears. Once you've copied the image, you can go back into your program, and then paste the address of this image into your program. If you don't like the pictures that you find on the Internet, you can upload your own images using DropBox or Google Drive or SkyDrive.

So go ahead and try combining some images to make some more interesting pictures. For example you can make a little photo montage, or we can take picture of a dog and a tree and put them together.

Do your programming with [jsbin] or [Orion]

Programming Basics

E-mail | About | Privacy Policy