Learn How to Draw arc with arcTo() method on html5 Canvas. To Draw an arc we are able to use two methods on html5 Canvas. However in this tutorial we are going to learn how to draw HTML5 Canvas Arc with arcTo() method
The First Method :
The first methodarc()
has the following structure.
context.arc(x,y,radius,startAngle,endAngle,anticlockwise);
There are six arguments which First method Follows
1:x
the 1st argument defines the xCoordinates of first point of arc i.e strating point of arc.Its value is given in number as pixel or ratio of canvas width.
2:y
The second argumenty
describe the yCoordinate of starting point of arc.This value is given in number as pixel or ratio of height of canvas .
3:radius
:
The third argument is radius of circle as width of arc. This value is also given in number and indicates the number of pixels for circle radius.
4:startAngle:
This arguments indicates the starting point angle with x axis.This value is measured in radians.
5:endAngle
This point show the end point angle with x axis.This value is also given in radians.
6:anticlockwise
This value show that angle is made in anticlockwise direction. This value is given as boolian value. It takes true or false value.
the code for drawing arc with arc() method is given.
context.arc(100,100,20,(Math.PI/180)0,(Math.PI/180) 360,false);
second method: arcTo()
The second method arcTo() has following structure.
context.arcTo(x1,y1,x2,y2,radius);
This method takes five argument.
1: x1
x1 define xCoordinate of first point,its value is given in number as pixel.
2: y1
This defines yCoordinate of first point.
3: x2
This define xCoordiante of second point.
4: y2
This define yCoordinate of second point.
5: radius
This define the radius of arc,between two points.context.arcTo() method works only if the current path has at least one path.
let's start a line from point (0,0) to pm oint(100,200).From second point we will build our small arc.
code for arc will be:
context.moveTo(0,0);
context.lineTo(100,200);
context.arcTo(350,350,100,100,40);
The code of complete example is given.
<!DOCTYPE html>
<html>
<head>
<title>Drawing </title>
</head>
<body>
<canvas id ="myCanvas" width ="600" height ="400"
style="border: 1px solid blue;">
</canvas>
<script>
var canvas = document.getElementById ("myCanvas");
var context =canvas.getContext('2d');
// set stroke width and style
context.beginPath();
context.strokeStyle ="black";
context.lineWidth =5;
//draw a arc
context.moveTo(0,0);
context.lineTo(100,200);
context.arcTo(350,350,100,100,40);
context.stroke();
</script>
</body>
</html>
=============================================
You can see on pencode the code of arc drawn with arcTo() method
[codepen_embed height=300 theme_id=1 slug_hash=’vEZbZb’ user=’aslamwaqar’ default_tab=’html’ animations=’run’]
[/codepen_embed]