Yogesh Chauhan's Blog

HTML canvas methods

in HTML & JavaScript on April 30, 2021

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.


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Debugging in WordPress Part 1: WP_DEBUGWordPressFile System Integrity: How to Keep an Eye on Your Files and Folder Change?MiscellaneousHow to make HTML form interactive and using CSS?CSSFull and Partial ROLLUP in Postgresql with ExamplesPostgresWhat’s a Web Storage API in JavaScript?JavaScriptHow to clean up after a plugin uninstall in WordPress?WordPress