Canvas paths

After briefly introducing canvas coordinates, in this chapter we are going to present how to draw some other objects with canvas element.

To see how a browser understands canvas drawing methods, we need to realize that each canvas has a path associated with it. A path has its beginning (left-top coordinates), intermediate points also called sub-paths, and an ending point. Ending point of each new sub-path becomes the new context point.

Several methods may be used to define a path-based canvas drawing:

• beginPath() - resets the current path
• moveTo(x, y) - creates a new sub path with the given point
• closePath() - marks the current sub path as closed while starting a new sub path with a point the same as the start and end of the newly closed sub path
• fillStyle - defines the fill color of the element
• fill() - fills the sub paths with the current fill style
• arc(x, y, radius, startAngle, endAngle, anticlockwise) - defines points of the path that creates a radial element; the arc described by the circumference of the circle defined by the arguments (starting and ending at given angles); the argument anticlockwise defines the direction of drawing
• quadraticCurveTo() - adds a point to the current path by applying a quadratic Bézier curve
• bezierCurveTo() - adds a point to the current path by applying a cubic Bézier curve
• stroke() - strokes the sub paths with the current stroke style

Drawing a circle

To draw a circle by using a canvas element we need to apply beginPath() and arc() methods, as shown in example below:

Example

Drawing a face (circle) with canvas element example:

 

›› go to examples ››