# Drawing Arcs

We use the arc and arcTo methods to draw arcs on the canvas.

NameDescriptionReturns
arc(x, y, rad, startAngle, endAngle,direction)Draws an arc to (x, y) with radius rad, start angle startAngle, and finish angle endAngle.void
arcTo(x1, y1, x2, y2,rad)Draw an arc to (x2, y2) that passes (x1, y1) and has radius radvoid

## Using the arcTo Method

``````
<!DOCTYPE HTML>
<html>
<title>Example</title>
<style>
canvas {
border: thin solid black
}

body>* {
float: left;
}
</style>
<body>
<canvas id="canvas" width="500" height="140">
Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
var point1 = [ 100, 10 ];
var point2 = [ 200, 10 ];
var point3 = [ 200, 110 ];
ctx.fillStyle = "yellow";
ctx.strokeStyle = "black";
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.arcTo(50, 110, 40, 70, 100);
ctx.stroke();
drawPoint(100, 200);
drawPoint(20, 110);
drawPoint(20, 70);
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.lineTo(100, 110);
ctx.lineTo(20, 70);
ctx.stroke();
function drawPoint(x, y) {
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.strokeRect(x - 2, y - 2, 4, 4);
}
</script>
</body>
</html>

``````
Click to view this demo.

## Drawing arcs in response to mouse movements

``````
<!DOCTYPE HTML>
<html>
<title>Example</title>
<style>
canvas {
border: thin solid black
}
</style>
<body>
<canvas id="canvas" width="500" height="140">
Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
var canvasElem = document.getElementById("canvas");
var ctx = canvasElem.getContext("2d");
draw();
function draw() {
ctx.fillStyle = "yellow";
ctx.strokeStyle = "black";
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.arcTo(50, 110, 40, 70, 50);
ctx.stroke();
drawPoint(100, 200);
drawPoint(110, 110);
drawPoint(70, 70);
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.lineTo(110, 110);
ctx.lineTo(40, 70);
ctx.stroke();
}
function drawPoint(x, y) {
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.strokeRect(x - 2, y - 2, 4, 4);
}
</script>
</body>
</html>

``````
Click to view this demo.

If the control key is pressed, the first point is moved. If the shift key is pressed, the second point is moved. If neither key is pressed, the third point is moved.

## Using the arc Method

``````
arc(x, y, radiusOfArc, startAngle, endAngle, clockwiseTrueOrFalse);
``````
``````
<!DOCTYPE HTML>
<html>
<title>Example</title>
<style>
canvas {
border: thin solid black
}

body>* {
float: left;
}
</style>
<body>
<canvas id="canvas" width="500" height="140">
Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
ctx.fillStyle = "yellow";
ctx.lineWidth = "3";
ctx.beginPath();
ctx.arc(200, 70, 60, 0, Math.PI * 2, true);
ctx.stroke();
ctx.beginPath();
ctx.arc(200, 70, 60, Math.PI / 2, Math.PI, true);
ctx.fill();
ctx.stroke();
ctx.beginPath();
var val = 0;
for ( var i = 0; i < 4; i++) {
ctx.arc(50, 70, 60, val, val + Math.PI / 4, false);
val += Math.PI / 2;
}
ctx.closePath();
ctx.fill();
ctx.stroke();
</script>
</body>
</html>

``````
Click to view this demo.
Home
HTML CSS Book
HTML

canvas:
Related: