arc() - Javascript Canvas Reference

Javascript examples for Canvas Reference:arc


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

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.


Create a circle:

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>

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


var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();// w w w.j a va  2 s  .c o 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



Related Tutorials