arc() - Javascript Canvas Reference

Javascript examples for Canvas Reference:arc

  1. HOME
  2. Javascript
  3. Canvas Reference
  4. arc

Description

The arc() method creates an arc. An arc is parts of circles.

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

JavaScript syntax 


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

Parameter Values

ParameterDescription
xThe x-coordinate of the circle center
yThe y-coordinate of the circle center
rThe radius of the circle
sAngle The starting angle, in radians
eAngle The ending angle, in radians
counterclockwise Optional. False is default, and indicates clockwise.

Example

Create a circle:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

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

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();/* ww w .  ja v  a2s.  co m*/
ctx.moveTo(20, 20);               // Create a starting point
ctx.lineTo(100, 20);              // Create a horizontal line
ctx.arcTo(150, 20, 150, 70, 50);  // Create an arc
ctx.lineTo(150, 120);             // Continue with vertical line
ctx.stroke();                     // Draw it

</script>

</body>
</html>

Related Tutorials