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 ››