Canvas - HTML5 - page 187

mycontext.beginPath();
mycontext. arc (35, 35, 10, 0, Math.PI * 2, true); // draw a circle
mycontext.fillStyle = "#f00";
mycontext. fill (); // fill the circle solid
Figure 9-1 shows the result of this code.
Figure 9-1. A <canvas> element on the page, with a black line and a red circle drawn on it
In canvas , the order of how you draw things is important, as the last
drawing operation for any pixel is the one that is visible. Here, we drew
the line first and the circle second.
The canvas API
Here are some commonly used drawing commands in the canvas API:
beginPath()
Start a path segment definition, to be used by a rendering operation like stroke()
or fill() .
closePath()
Close the path by adding a line segment from the end of the path back to the
beginning of the path.
moveTo( x , y )
Move the registration point for the next relative drawing operation.