HTML canvas methods

Canvas tag in HTML is quite handy. We can draw a line, draw a circle or even draw a text image.

beginPath()

The beginPath() method, as per the name suggests, begins a path. It is also used to reset the current path.

moveTo()

The moveTo() method moves the path. You have to pass some points so that the method can move the path to those points in the canvas. It doesn’t create the fine line. All it does it move the path.

It takes two parameters x-coordinate and y-coordinate.

lineTo()

The lineTo() method creates a line from last point specified in the canvas to the new point. Basically, it adds the invisible line, it knows from and to but it still doesn’t know how to make the line visible to the user.

It takes two parameters x-coordinate and y-coordinate.

stroke()

Finally, with all those points and creating invisible lines (or any other object) we can make it visible to the user. Basically, stroke() method draws the path.

You can specify the color of the object using strokeStyle. If not, it will take black as the default color.

Here’s the working demo using all methods above:

arc()

The arc() method creates an arc. It is quite handy when comes to create a circle, a half circle or even a part of a circle.

I have a seperate post on How to Draw a Circle in HTML5 Using Canvas Tag?

arc() method takes 6 parameters.

context.arc(x-coordinate, 
  y-coordinate,
  radius,
  start of the angle,
  end of the angle,
  counter clock drawing);

The last parameter counter clock drawing is optional and a boolean value. Use it to draw counter clockwise.

Note: There are few other canvas methods like quadricCurveTo(), fill(), bezierCurveTo(), arcTo() etc as well.

Share this post