HTML and CSS Reference
In-Depth Information
Figure 14-2
The canvas coordinate grid.
Every time that you draw on a canvas, you create a new layer. This means that if you need something to appear
above everything else, it should be the last thing that you draw on the canvas.
Now that you've covered some of the theory behind how the Canvas API works, you can start drawing on your can-
vas.
The first object that you are going to draw is a rectangle. To do this, you use the
fillRect()
function:
fillRect(x,y,width,height)
The
fillRect()
function has four parameters. The
x
and
y
parameters specify the position of the rectangle on the
canvas grid. These will be the coordinates for the top-left corner of the rectangle (see Figure 14-2). The
width
and
height
parameters specify the rectangle's size.
