draws an arc
Description
arc(x, y, rad, startAngle, endAngle,direction) draws an arc to (x, y) with radius rad, start angle startAngle, and finish angle endAngle.
Example
<html>
<head>
<script>
window.onload = function(){<!-- w w w . j a v a 2s . c om-->
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.lineWidth = 15;
context.strokeStyle = "black"; // line color
context.arc(canvas.width / 2,
canvas.height / 2 + 40,
80, 1.1 * Math.PI,
1.9 * Math.PI, false);
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>
</body>
</html>
Example 2
Drawing a circle with border and fill
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function(){<!-- w w w . j a v a2 s.c o m-->
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(canvas.width / 2, canvas.height / 2, 70, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>
</body>
</html>