Draw an arc in JavaScript

Description

The following code shows how to draw an arc.

Example


<html>
<head>
<script>
window.onload = function(){<!--from   w  w  w .  ja v a2 s .  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>

Click to view the demo

The code above generates the following result.

Home »
  Javascript Tutorial »
    Canvas »
      Canvas Shape

Draw an arc in JavaScript

Draw an arc with control points in JavaScri...
Draw spiral with lineTo method on HTML5 can...
Fill a rectangle in JavaScript
Paint a cloud by using bezier curve in Java...
Set line join style in JavaScript
Set linecap on HTML5 canvas in JavaScript
Show Control points for Cubic Bezier Curves...
Use solid color to fill a triangle in JavaS...