CanvasRenderingContext2D — the object used for drawing on a canvas
The CanvasRenderingContext2D object provides properties and methods for drawing two-dimensional graphics. The following sections provide an overview. See Graphics in a <canvas>, Canvas, CanvasGradient, CanvasPattern, ImageData, and TextMetrics for further details.
Creating and rendering paths
A powerful feature of the canvas is its ability to build shapes up from basic drawing operations, then either draw their outlines (stroke them) or paint their contents (fill them). The operations accumulated are collectively referred to as the current path. A canvas maintains a single current path.
In order to build a connected shape out of multiple segments, a joining point is needed between drawing operations. For this purpose, the canvas maintains a current position. The canvas drawing operations implicitly use this as their start point and update it to what is typically their end point. You can think of this like drawing with a pen on paper: when finishing a particular line or curve, the current position is where the pen rested after completing the operation.
You can create a sequence of disconnected shapes in the
current path that will be rendered together with the same drawing
parameters. To separate shapes, use the
moveTo() method; this moves the current
position to a new location without adding a connecting line. When
you do this, you create a new subpath, which is the canvas term used for a collection of operations ...