Draw Arc with arcTo() method HTML5 Canvas

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 method arc() 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 argument y 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]

Author: Habibullah Qamar

Its me Habib Ullah Qamar working as a Lecturer (Computer Sciences) in Pakistan. I have an MS(M.Phil) degree in computer sciences with specialization in software engineering from Virtual University of Pakistan Lahore. I have an experience of more than 15 years in the filed of Computer Science as a teacher. Blog Writing is my passion. I have many blogs, This one is special made with the aim of providing 100% Free online coaching and training to the students of under-graduate and postgraduate classes. Most of the students enrolled in computer sciences, information technology, software engineering and related disciplines find it difficult to understand core concepts of programming and office automation. They find difficult in understanding and solving their assignments.

Leave a Reply

Your email address will not be published. Required fields are marked *