html tutorial - arcTo() Method in HTML5 Canvas - html5 - html code - html form

Learn html - html tutorial - Arcto method in html5 canvas - html examples - html programs

The arcTo() is the Method of HTML CANVAS
The arcTo() method is used to creates an arc/curve between two tangents on the canvas.

Syntax for arcTo() Method in HTML5 Canvas:

context.arcTo(x1,y1,x2,y2,radius);

Parameter values for arcTo() Method in HTML5 Canvas:

Value	Description
X1	The x-coordinate of the first tangent.
Y1	The y-coordinate of the first tangent.
X2	The x-coordinate of the second tangent.
Y2	The y-coordinate of the second tangent.
radius	The radius of the arc.

Sample Coding for arcTo() Method in HTML5 Canvas:

Tryit<!DOCTYPE html>
<html>
    <head>
      <title>wikitechy - arcTo() Method in Canvas</title>
    </head>
    <body>
        <h1>wikitechy Canvas</h1>
        <canvas id="wikitechycanvas" width="300" height="150" 
             style="border:1px solid #d3d3d3;">
        </canvas>
        <script>
        var canvas= document.getElementById("wikitechyCanvas");
        var context= canvas.getContext("2d");
        context.beginPath();
        context.moveTo(20, 20);               
        context.lineTo(100, 20);             
        context.arcTo(150, 20, 150, 70, 50);  
        context.lineTo(150, 120);             
        context.stroke();                  
        </script>
    </body>
</html>

Code Explanation for arcTo() Method in HTML5 Canvas:

arcTo() method in HTML5 canvas Code Explanation

”wikitechyCanvas” is used to define the id attribute value for canvas element.
The getElementById(); method is used to get the element that has the id attributes value as “wikitechyCanvas”.
canvas.getContext(“2d”) method returns an object that provides methods and properties for drawing on the canvas
The beginPath() method begins a path, or resets the current path.
The moveTo() method is used to select the starting point as (20,20)
The lineTo()method is used to select the ending point as (100,20).
The arcTo() is used to create circle on canvas