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.


amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS? #Aug 1 What is Zdog? #Aug 1 How to add before after image effect using pure CSS? #Jul 31 Add animation to your skills bar using CSS #Jul 31 Use SwiperJS to create mobile touch sliders fast
You might also like these
How to create a horizontal scrolling menu with and without flex using CSS (or SCSS)?CSSHow to create a full screen loader using CSS and JavaScript?CSSSQL ANY OperatorSQL/MySQLHow does while loop work in SCSS?SCSSAll different methods for accessing elements in the DOM using JavaScriptJavaScriptHow to convert an HTML radio buttons into a toggle switch using CSS?CSS