2D Canvas: low-level, 2D graphics rendering - HTML5 in Action - page 244

Creating the game's paddle requires a Canvas path composed of multiple arcs and lines.
This single step of creating a paddle is pretty complex, so we've broken it down into an-
other step-wise process, all of which will happen within a single listing:
1 . Start drawing a path with ctx.beginPath() .
2 . Use ctx.moveTo(x, y) to move the path without drawing on the Canvas (op-
tional).
3 . Draw lines as needed with ctx.lineTo(x, y) .
4 . Close the currently drawn path via ctx.closePath() to prevent abnormal
drawing behavior.
5 . Use steps 2 and 3 as often as you want.
6 . Set the color of the line with ctx.strokeStyle or ctx.fillStyle ; the
game uses the browser's default color if you don't manually set it.
7 . Fill in the path by using ctx.stroke() .
In addition to the lineTo command, you'll use arcTo(x1, y1, x2, y2, radi-
us) to create curves for your paddle.
Note
arcTo() is slightly unstable in Opera v12.01. It won't break your game, but it will
cause the paddle you're creating to look like surreal art. IE9 requires you to declare an
extra lineTo() between the arcTo() s; otherwise, the paddle will look like a bunch of
randomly placed curves. Normally you can use arcTo() without lineTo() s between
them, and the arcs will form a full shape without crashing.