Drawing Lines, Curves, and Basic Shapes

You don’t see it, but your canvas is like a huge sheet of graph paper—a grid comprised of dots (pixels) arranged in columns and rows, as shown in Figure 23.2. Columns of pixels run up and down along the y axis, while rows run across the canvas along the x axis. Positions on the grid are described using x,y coordinates, with the point in the upper-left corner of the canvas being 0,0. As you move down and to the right, the numbers go up.
You’ll be using coordinates to draw objects on the canvas. To draw a straight line, for example, you specify x,y coordinates for the two end points. To draw a circle, you specify coordinates for its center and a measurement for the radius. The following sections show you ...

Get The Complete Idiot's Guide® To HTML5 and CSS3 now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.