1. Introduction
  2. Draw a Circle
  3. Add Some Color
  4. Action
  5. Library: an Interlude
  6. Bounce
  7. Add a Paddle
  8. The Keyboard
  9. The Mouse
  10. The Bricks
  11. Finishing Touches
  12. Coda

Draw a Circle

The first thing we need to do is create an instance of the <canvas> element so that we can start to draw on it. If you look in the source for this page, you'll see a declaration that looks like this:
<canvas id="canvas" width="300" height="300"></canvas>
This declaration creates the canvas on which we'll draw in the rest of the tutorial.

Now that we've got a canvas to draw on, let's do so:

You may want to comment out the arc(...) call and try ctx.rect(x, y, width, height).

Make sure you keep the arc and rect calls in between calls to beginPath() and closePath() just like the sample call above. You may also try substituting stroke() for fill().

next prev