HTML Canvas - arcTo() Method

The HTML Canvas arcTo() method of CanvasRenderingContext2D interface can be used to add circular arcs to the current path, using two control point co-ordinates with the radius inside the Canvas element.

This method generally returns rounded corners, semi arcs etc which are drawn using circular paths.

Syntax

Following is the syntax of HTML Canvas arcTo() method −

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

Parameters

Following is the list of parameters of this method −

S.No	Parameter & Description
1	x1 x co-ordinate of the first control point.
2	y1 y co-ordinate of the first control point.
3	x2 x co-ordinate of the second control point.
4	y2 y co-ordinate of the second control point.
5	radius Radius of the arc to be drawn onto the canvas element.

Return value

By taking the control points and radius values passed as parameters, a rounded arc is drawn on the canvas element.

Example

The following example is used to draw simple arc onto the Canvas element using HTML Canvas arcTo() method.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="150" height="100" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         context.beginPath();
         context.moveTo(25, 25);
         context.arcTo(50, 50, 400, 130, 150);
         context.stroke();
         context.closePath();
      </script>
   </body>
</html>

Output

The output returned by the above code on the webpage as −

Example

The following example draws a simple arc onto the Canvas element with the help of arcTo() method.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="250" height="150" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         context.beginPath();
         context.moveTo(180, 80);
         context.arcTo(180, 140, 100, 130, 130);
         context.stroke();
      </script>
   </body>
</html>

Output

The output returned by the above code on the webpage as −

html_canvas_paths.htm