HTML canvas arc() Method

Introduction

Create a circle:

View in separate window 

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="180" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();/*from  w w  w  .  j a v  a 2s.c om*/
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>

</body>
</html>

The arc() method creates an arc/curve.

To create a circle with arc(): Set start angle to 0 and end angle to 2*Math.PI.

Use the stroke() or the fill() method to actually draw the arc on the canvas. 

context.arc(x, y, r, sAngle, eAngle, counterclockwise);

Parameter Values

Parameter
 Description
x
 The x-coordinate of the center of the circle
y
 The y-coordinate of the center of the circle
r
 The radius of the circle
start-Angle
 The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
end-Angle
 The ending angle, in radians
counter-clockwise

 Optional. Set whether the drawing should be counter-clockwise or clockwise.
False is default, and indicates clockwise, while true indicates counter-clockwise.



PreviousNext

Related