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




	Arcto method in html5 canvas

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

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

Output for arcTo() Method in HTML5 Canvas:

arcTo() method in HTML5 canvas Output

  1. The canvas rectangle with width as 300 and height as 150
  2. It displays an arc between two tangents on the canvas.

Browser Support for rect() Method in HTML5 Canvas:

Yes 9.0 Yes Yes Yes

Tips and Notes

  • Use stroke() method to actually draw the arc on the canvas.

Related Searches to arcTo() Method in HTML5 Canvas