HTML and CSS Reference
In-Depth Information
context.beginPath()
context.moveTo(x, y)
context.closePath()
context.lineTo(x, y)
context.quadraticCurveTo(cpx, cpy, x, y)
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
context.arcTo(x1, y1, x2, y2, radius)
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
context.rect(x, y, w, h)
context.fill()
context.stroke()
context.clip()
context.isPointInPath(x, y)
Knowing how to use these methods with a
<canvas>
tag doesn't ensure that they'll look
good. h e remainder of this chapter examines most of these methods. You should be well on
your way to creating many dif erent shapes by the chapter's end.
LINES AND MOVEMENT
h e best way to start thinking about using the canvas tools for drawing is to visualize all
drawings on a grid, just as you did with rectangles. However, given the relative complexity of
freeform drawing, even with straight lines, the beginning point is with images on a grid.
Figure 13-10 shows two drawings that can be created with straight lines.
270
0,0
Each grid box is 20 x 20 pixels.
Figure 13-10: Images on a grid.
h e grid boxes are 20 pixels wide and 20 pixels high. If you take a pencil and a piece of grid
paper (or turn on the grid on a drawing program), you can replicate the images in Figure
13-10. Starting with the let image in Figure 13-10, a typical drawing would consist of the
following steps:
