YogeshChauhan . com

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.

dreamhost

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 uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 5 Use inline if to make a shorter conditional syntax in React May 4 What is Conditional Rendering in React? May 3 How does @extend rule work in SCSS (Sass)? May 2 How different is Handling Events in React vs HTML DOM? May 2 How to create bouncing balls using HTML canvas and JavaScript? Apr 30 HTML canvas methods

You might also like these

How to Check If a Variable is an Integer, a Float, a Number, NaN, an Infinite or a Numeric in PHP?PHPThe 8 Golden Rules of Programming I Have Learned in My CareerMiscHow to create a dynamic countdown using HTML and JavaScript?HTMLA Quick Guide to Object-Oriented Programming in PHPPHPHow To Create a Fullscreen Background Video using CSS and JavaScript?CSSHow to get the height and width of an element using JavaScript?JavaScript