HTML5 Canvas Reference - arc()
An arc can be a complete circle or any part of a circle.
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
arc() |
Yes | Yes | Yes | Yes | Yes |
JavaScript syntax
Here is context.arc() signature:
arc(x, y, radius, startAngle, endAngle, anticlockwise)
The x and y values define the center of our circle, and the radius will be the radius of the circle upon which our arc will be drawn.
startAngle and endAngle are in radians, not degrees.
anticlockwise is a true or false value that defines the direction of the arc.
To draw a circle with a center point at position 100,100 and with a radius of 20, we could use the following code:
context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*360, false);
We have to convert our start angle (0) and our end angle (360) into radians by multiplying them by (Math.PI/180).
By using 0 as the start angle and 360 as the end, we create a full circle.
To draw a segment of a circle, do not specify the entire 0 to 360 start and stop angles.
The following code draws one-quarter of a circle.
context.arc(100, 200, 20, (Math.PI/180)*0, (Math.PI/180)*90, false);
To draw everything but the 0-90 angle, we can employ the anticlockwise argument and set it to true:
context.arc(100, 200, 20, (Math.PI/180)*0, (Math.PI/180)*90, true);Parameter Values
| Parameter | Description |
|---|---|
| x | The x-coordinate of the circle center |
| y | The y-coordinate of the circle center |
| r | The circle radius |
| startAngle | The starting angle, in radians |
| endAngle | The ending angle, in radians |
| counterclockwise | Optional. Set the drawing direction, counterclockwise or clockwise.
false is default, and indicates clockwise.
true indicates counter-clockwise. |
Example
The following code creates a circle:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
<!--from ww w. j a va2s . c o m-->
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</html>
The code above is rendered as follows:
Example 2
The following code shows how to draw half circle and quarter circle.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
<!-- w w w . j a v a 2 s . c om-->
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
//ctx.arc(100,75,50,0,2*Math.PI); //Full circle
//ctx.arc(100,75,50,0,1.5*Math.PI); //3/4 circle
//ctx.arc(100,75,50,0,Math.PI); //Half circle
ctx.arc(100,75,50,0,0.5*Math.PI); //1/4 circle
ctx.stroke();
</script>
</body>
</html>
The code above is rendered as follows:
Example 3
The following code shows how to change the drawing direction.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
<!--from w w w . j ava 2s.co m-->
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc( 100, 100, 20, 0,Math.PI/2, true );
ctx.stroke();
</script>
</body>
</html>
The code above is rendered as follows:
Example 4
The following code shows how to connect two circles.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
var canvas= document.getElementById('canvas');
var ctx = canvas.getContext('2d');
<!--from ww w .j a v a 2 s . c o m-->
// save default state
ctx.save();
// draw new arc with new settings
ctx.lineWidth = 2;
ctx.fillStyle = '#bfb';
ctx.strokeStyle = '#999';
ctx.beginPath();
ctx.arc(50, 50, 20, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.stroke();
// restore default state
ctx.restore();
// save default state again
ctx.save();
// draw line with new settings
ctx.beginPath();
ctx.lineWidth = 4;
ctx.strokeStyle = '#000';
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.stroke();
// restore default state
ctx.restore();
// save default state third time
ctx.save();
// draw round circle with new settings
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = '#999';
ctx.arc(100, 100, 30, 0, 2 * Math.PI);
ctx.closePath();
ctx.fillStyle = '#bfb';
ctx.fill();
ctx.stroke();
// restore default state
ctx.restore();
</script>
</body>
</html>
The code above is rendered as follows:
Example 5
The following code shows how to draw a ring.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
var canvas= document.getElementById('canvas');
var ctx = canvas.getContext('2d');
<!-- ww w .jav a 2s .co m-->
var w = canvas.width;
var h = canvas.height;
var r1 = Math.min(w, h) * 0.4; // outer radius
var r0 = r1 - 40; // inner radius
var n = 32; // number of blocks
var theta = 2 * Math.PI / n;
var phi = theta * 0.45; // relative half-block width
ctx.save();
ctx.fillStyle = '#c0c0c0';
ctx.translate(w / 2, h / 2); // move to center of circle
for (var i = 0; i < n; ++i) {
ctx.beginPath();
ctx.arc(0, 0, r0, -phi, phi);
ctx.arc(0, 0, r1, phi, -phi, true);
ctx.fill();
ctx.rotate(theta); // rotate the coordinates by one block
}
ctx.restore();
</script>
</body>
</html>
The code above is rendered as follows:
Example 6
The following code shows how to draw circle from center.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
var canvas = document.getElementById('canvas');
<!--from w ww .j a va 2s. c o m-->
var cen = 250;
var len = cen, i = len;
var ctx = canvas.getContext("2d");
var red = "#f00";
var white = "#fff";
for (; i > 0; i--){
ctx.beginPath();
ctx.arc(cen, cen, i, 0, 2 * Math.PI, false);
ctx.fillStyle = i % 2 ? red : white;
ctx.fill();
}
</script>
</body>
</html>
The code above is rendered as follows: