Learning Canvas, the Hero of HTML5 - HTML5 Mobile Game Development - page 301

// Draw the portion of the image defined by the rectangle sx,sy and
sw,sh
// at x,y with width w and height h
ctx.drawImage(image, sx, sy, sw, sh, x, y, w, h)
The first version draws a full image at its full size at a location on the canvas.
The second version draws a full image that has been resized to w by h . If the Canvas has been rescaled using
CSS or a transform has been applied, this may not mean w pixels by h pixels. For example, if you scale the
Canvas down by half as shown earlier for retina iOS devices, you might want to load images that have twice the
resolution and draw them at half width and half height to get the best visual results.
The third version is the one used throughout the Quintus code to pull a portion of an image from a spritesheet
and draw it onto the canvas.
The image argument in each case can be an Image object (which is equivalent to an <img> DOM element),
another <canvas> element, or a <video> element.
Drawing Paths
Paths are the most complicated drawing tool available for use in Canvas, but they are also the most powerful.
They enable you to draw arbitrary shapes and curves onto the Canvas. When a path is completed, you can either
call stroke to draw the path as an outline or fill to draw the path as a filled-in shape. If the path hasn't been
closed, the path will be implicitly closed when you call fill .
Instead of calling stroke or fill , you can also define a clipping region using the existing path by calling
clip . This can limit future drawing commands to the previously drawn path until you call restore . The
HTML5 specification defines a method called resetClip , but as of this writing it's not well implemented in
any browsers.
Paths are defined by points and the connecting segments between them. Those segments can be straight lines,
arcs, or curves. Each path consists of one or more subpaths, which can be closed (meaning the last point con-
nects to the first) or open.
To create a path call ctx.beginPath(); followed by any number of path commands, and then call
ctx.fill() or ctx.stroke() . If you want to create multiple subpaths, you can also call
ctx.closePath() to close the subpath and implicitly create a new one starting at the last point of the pre-
vious path. You can also call ctx.moveTo(x,y) to move the starting point for the next command and im-
plicitly create the new subpath if the previous path had more than 1 point. Calling moveTo does not, however,
implicitly close the previous subpath. When you call stroke or fill , all the subpaths in the current path are
affected.
Canvas provides seven different commands for drawing the various segments of a path that can be mixed
and matched. The details for each command are shown here:
• ctx.lineTo(x, y) : Adds a new point at x , y and connects the previous point with a straight line.
• ctx.quadraticCurveTo(cpx, cpy, x, y) : Adds a new point at x , y and connects the previous
point with a quadratic Bézier curve with the control point cpx, cpy .
• ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) : Adds a new point x , y to the
subpath and connects the previous point with a cubic Bézier curve defined by the control points cp1x,
cp1y and cp2x, cp2y .