arc method
Adds points to a path that represents an arc.
  |
Syntax
CanvasRenderingContext2D.arc(x, y, radius, startAngle, endAngle, anticlockwise);Parameters
- x [in]
-
Type: Floating-point
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: Floating-point
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: Floating-point
The radius or distance from the point (x,y) that the arc's path follows.
- startAngle [in]
-
Type: Floating-point
The starting angle, in radians, where 0 is at the 3 o'clock position of the arc's circle.
- endAngle [in]
-
Type: Floating-point
The ending angle, in radians.
- anticlockwise [in]
-
Type: BOOL
Return value
This method does not return a value.
Exceptions
| Exception | Condition |
|---|---|
|
The specified radius value is negative. |
Standards information
- HTML Canvas 2D Context, Section 9
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.
<html> <head> <title>Arc example</title> <script type="text/javascript"> 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 = 25 + j * 50; // The x-coordinate. var y = 25 + i * 50; // The y-coordinate. var radius = 20; // 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.arc(x, y, radius, startAngle, endAngle, anticlockwise); // Create the arc path. ctx.stroke(); // Display the work. } } } }// Curves </script> </head> <body onload="curves();"> <canvas id="canvas" width="300" height="300">This browser or document mode doesn't support canvas</canvas> </body> </html>
See also
Send comments about this topic to Microsoft
Build date: 11/28/2012
