Windows Dev Center

Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

arc method

Adds points to a path that represents an arc.

HTML Canvas 2D Context, Section 9Internet Explorer 9

 

Syntax

CanvasRenderingContext2D.arc(x, y, radius, startAngle, endAngle, anticlockwise);

Parameters

x [in]

Type: number

The x-coordinate, in pixels, for the center point of the arc in relation to the upper-left corner of the canvas rectangle.

y [in]

Type: number

The y-coordinate, in pixels, for the center point of the arc in relation to the upper-left corner of the canvas rectangle.

radius [in]

Type: number

The radius or distance from the point (x,y) that the arc's path follows.

startAngle [in]

Type: number

The starting angle, in radians, where 0 is at the 3 o'clock position of the arc's circle.

endAngle [in]

Type: number

The ending angle, in radians.

anticlockwise [in]

Type: BOOL

true

The arc is drawn in a counterclockwise direction from start to end.

false

The arc is drawn in a clockwise direction from start to end.

Return value

This method does not return a value.

Exceptions

ExceptionCondition
IndexSizeError

The specified radius value is negative.

 

Standards information

Remarks

If the startAngle and endAngle angles are equal, the arc method creates a circle. To convert degrees to radians use the following formula.


var radians = degrees * Math.PI/180

Examples

The following code example shows several different arcs. See the example in action.


<!DOCTYPE html> 
<html>
  <head>
   <title>Arc example</title>
   <style>
     canvas {
       border:solid 1px blue;
     }
   </style>
  </head>
  <body">
    <canvas id="canvas" width="400" height="275">This browser or document mode doesn't support canvas</canvas> 
    <script>
      function curves() {
        var canvas = document.getElementById("canvas");
        if (canvas.getContext) {
          var ctx = canvas.getContext("2d");
          for (var i = 0; i < 2; i++)                            // Step through two rows.
          {
            for (var j = 0; j < 3; j++)                        // Step through three versions.    
            {
            ctx.beginPath();
            var x = 75 + j * 125;               // The x-coordinate.
            var y = 75 + i * 125;               // The y-coordinate. 
            var radius = 50;                    // The arc radius.
            var startAngle = 0;                     // The starting point on the circle.
            var endAngle = Math.PI + (Math.PI * j) / 2; // The end point on the circle.
            var anticlockwise = i % 2 == 0 ? false : true; // The direction of drawing.
            ctx.lineWidth = 4;
            ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); // Create the arc path.
            ctx.stroke();                               // Display the work.
          }
        }
      } 
     }// Curves      
     curves();
   </script>
  </body>
</html> 


See also

CanvasRenderingContext2D

 

 

Show:
© 2015 Microsoft