HTML Canvas - arc() Method

The HTML Canvas arc() method of CanvasRenderingContext2D interface can be used to add arcs to the current path in the Canvas element.

Syntax

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

CanvasRenderingContext2D.arc(x, y, radius, start_angle, end_angle, anti_clockwise);

Parameters

Following is the list of parameters of this method −

S.No	Parameter & Description
1	x A path currently available in the Canvas element to add.
2	Y To apply transform to the path that is being added.
3	radius Radius of the arc to be drawn onto the canvas element.
4	start_angle The angle of the arc measured from X-axis in radians.
5	end_angle The angle of the arc measured from Y-axis in radians.
6	anti_clockwise A Boolean value which corresponds to clockwise direction if false is given and anti-clockwise direction if true is given. Default value is false.

Return value

By taking the values passed as parameters, an arc is drawn on the canvas element.

Example

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

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="400" height="200" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         context.beginPath();
         context.arc(100, 100, 50, 0, 1.5 * Math.PI);
         context.stroke();
         context.closePath();
         context.beginPath();
         context.arc(250, 100, 50, 1.5 * Math.PI, 2 * Math.PI, false);
         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 filled circle onto the Canvas element using arc() method.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="320" height="250" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         context.beginPath();
         context.arc(150, 120, 100, 0, 2 * Math.PI);
         context.fill();
         context.closePath();
      </script>
   </body>
</html>

Output

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

Example

The following example uses arc() method to draw Audi car logo on the Canvas element.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="320" height="200" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         context.beginPath();
         context.strokeStyle = '#8A8D8F';
         context.lineWidth = 4;
         context.arc(100, 100, 25, 0, 2 * Math.PI);
         context.stroke();
         context.closePath();
         context.beginPath();
         context.strokeStyle = '#8A8D8F'
         context.arc(130, 100, 25, 0, 2 * Math.PI);
         context.stroke();
         context.closePath();
         context.beginPath();
         context.strokeStyle = '#8A8D8F'
         context.arc(160, 100, 25, 0, 2 * Math.PI);
         context.stroke();
         context.closePath();
         context.beginPath();
         context.strokeStyle = '#8A8D8F'
         context.arc(190, 100, 25, 0, 2 * Math.PI);
         context.stroke();
         context.closePath();
      </script>
   </body>
</html>

Output

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

html_canvas_paths.htm