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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

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
How to remove the Gutenberg Block Library CSS from WordPress?WordPressHow to avoid element shift on border change while hovering in CSS?CSSHow to add Laravel to WordPress using Sage theme (and install Tailwind CSS)?PHPHow to Draw a Text Image using JavaScript?JavaScriptCreate dynamic selectors using SCSS (Sass)SCSS4 different Ways to Get JavaScript OutputJavaScript