Basic <canvas> Tutorial
What you'll be making
It's really simple: It's just a ball bouncing around. If you're using a browser that doesn't support the canvas element but still has Flash player installed, I made it so that you can still see a little Flash script that does exactly the same thing as the canvas one would do just so you can get a sense of what it should look like.
You'll need to open a basic text editor, or maybe a text editor with code coloring, like gedit. If you use a visual editor like Dreamweaver, well, either DON'T, or make sure you use to the code side and not the design side.
Make a new file. When you save it, make sure the file extension is .html and not .txt or anything like that.
Setting up your page
Some things to note here:
- The doctype is simple HTML, and not anything else. This is the HTML5 doctype, which you can learn about at w3schools if you want.
- You'll notice there's nothing in between the <canvas> and the </canvas>. Anything that goes in between them is not displayed by a browser that supports canvas. However, browsers that don't support canvas will display the code in between the tags. So, if you want to, you can put something like an image, a flash script that does the same thing as the canvas, or maybe even a link to a browser with canvas support in between the canvas tags so that the people using old browsers can still get at least an idea of what's there.
- The CSS style just adds a 2 pixel thick black border around the canvas (So you can see it better on a white background.) You can change it or remove it if you want.
Here's what we'll put in between the <script> and the </script> tags:
Then add this to the <body> tag:
Ok, now, time to explain some of this!
Firstly, if you don't know what a function is, it is pretty much a predefined set of actions bundled into a larger set of instructions. Think of it like this: the function dinnerParty() could be made of the actions jeff.answerDoor(), mary.talk("current_news"), tom.serveDinner("meatloaf") and mary.weight+=10 (because apparently Mary ate 10 pounds of meatloaf).
In our case, we have two functions: draw() and refresh(). The line <body onload="refresh()"> tells us that the refresh() function is the one that is used to start the whole process. Then, if you take a look at what refresh() does, it updates the direction and position of the ball, and then calls on the draw() function so that the canvas erases what it has and then redraws the ball according to the updated variables. Then, it sets a timer that calls refresh again in 50 milliseconds. So, since it is refreshing itself, it will update the variables, draw them, and then start the timer again, only to repeat this process again in another 50 milliseconds.
For your own knowledge, I'll explain the parameters of some of the functions used so that you can know how to use them to fit your own needs.
Firstly, the arc() function can seem a bit abstract. Here's what it actually means:
variable.arc(x, y, radius, startAngle, endAngle, anticlockwise);
So, to make a circle at the coordinate (20, 75) with a radius of 15, a start angle of 0, an end angle of 2*Pi, to draw it anticlockwise, and to draw it into a canvas variable called "mycanvas" would be:
mycanvas.arc(20, 75, 15, 0, Math.PI*2, true);
Secondly, the setTimeout can be useful in all kinds of situations, so here's how to use it:
The function is always in quotes, the delay is always in milliseconds, and it has to be applied to a variable. In the code for the ball, we run the refresh() functions every 50 milliseconds like so:
The finished code
Hopefully this was useful for you! If you want to read more about canvas, Mozilla has a good tutorial about it.