Export (0) Print
Expand All

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:
© 2014 Microsoft