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

Computer Graphics with HTML5 Canvas and JavaScript: Introduction

Welcome to my talk on drawing things on your computer using html5 canvas. This talk is meant to be interactive where you are expected to write some small computer programs while following along with the talk. You need some special tools to write these programs, so you need to go to this jsbin website to do your programming. Unfortunately, not all computers are able to run the programs from this talk. Older versions of Internet Explorer do not work. If you use a dark blue E to view websites, you won't be able to run the programs from this talk. In those cases you should download a different web browser such as Google Chrome or Mozilla Firefox.

I'll be covering a variety of topics during this talk. Some of these topics are more advanced, and they are designed to be optional. If you're interested in the advanced topics, feel free to follow them, but if you find them boring or if you're falling behind, feel free to skip these advanced topics.

Now before we start drawing things on the computer, we have to understand how a computer makes pictures. If you look closely at a computer screen, you'll find that it's made up of lots of tiny little dots. To make a picture on your computer, all you have to do is change the colors of some of these dots.

If you change some of these dots to a gray color, you can make a gray square.

If we change some of the dots to red and brown, you can make a picture of an apple.

These dots are known as picture elements or pixels for short. You've probably heard of the term pixels before. When talking about cameras, people often talk about their megapixels, or how many million pixels of detail there are in pictures taken by the camera. With cell phones, people often say something like, “this screen has a resolution of 800 by 480.” This means that the screen has 800 pixels or dots of detail going left-to-right, and 480 pixels or dots of detail going up-and-down. And with TVs people sometimes say that a TV is 720p HD. This 720 means there are 720 pixels or dots going up-and-down on the screen.

So far, we've learned that a computer screen is made up of lots of dots or pixels. To make a picture on the computer, you have the change the colors of some of these pixels. If you want the computer to make a picture, you need a way to tell the computer which pixels you want to change.

Let's say you wanted to change the color of this gray dot. How do you tell the computer where this gray dot is? First, you start in the upper left, and then you start moving to the right.

So let's count. To get to the gray dot, you have to move...



three times to the right.

You have to move three to the right to get to same column as the gray pixel.

Then you need to say how how far down you have to go. So let's count.


You only have to move down one time in order to get to the gray pixel. So now you have two numbers that tell you where the dot is: three, meaning you have to go three dots to the right, and one, meaning you have to go one dot down.

In math, you call these two numbers X and Y. X is how far you have to move to the right and Y is how far you have to move down.

So let's start programming. As I said at the beginning, you need to go to this jsbin website to do your programming. When you get to that website, the screen you see may not look exactly like this. We'll be doing our programming in JavaScript and sometimes the JavaScript panel doesn't appear. In that case click on the JavaScript button until you see the JavaScript panel.

To start drawing something, click in the JavaScript panel and type in this code. When you finish, you should see a gray line going across the screen in the output panel on the right. So go ahead and try this now.

One thing you have to be careful about, though, is that you need to type things exactly right. Computers are a little silly and it will give up if things aren't the same. If you type the program, and you don't see a gray line, there's a way to get the computer to tell you what it didn't understand. You need to go into a special mode, but you have to type different things to get to this mode. If you are using Internet Explorer, you press F12 to get to this mode. In Google Chrome or Mozilla Firefox, you press control shift and then J. On Apple Safari you press command option C. When you go into this special mode, the computer will tell you where in your program it got confused, and you can fix it.

Do your programming with [jsbin] or [Orion]

Programming Basics

E-mail | About | Privacy Policy