HTML5: Your visual blueprint™ for designing rich web pages and applications

DRAW PATHS ON THE CANVAS

Complex and irregular shapes can be drawn as canvas paths, generated by placing an “invisible ink” pen at a specific location and defining straight lines, arcs, or curves to build a shape. That shape can be filled or stroked, which draws it to screen.

All paths must begin with beginPath(). This removes all points established by any earlier paths. Note that previously drawn paths will remain on the canvas; this function just removes any of the analogous invisible ink.

Path-generation methods allow you to control your invisible ink pen:

• moveTo(x, y) — This moves the pen to a specific location in the canvas. This is useful as the first method in a new path to define where you want the path to begin.
• lineTo(x, y) — This ...