Next »
1038/1956
« Previous

Draw a arc with border and fill on HTML5 Canvas in JavaScript

Description

The following code shows how to draw a arc with border and fill on HTML5 Canvas.

Example


<html>
<head>
<script>
window.onload = function(){<!-- w w  w  .  ja  va 2 s . c o m-->
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//      x    y   rad sAng eAng antiC  line    fill
drawArc(60,  15, 40, 0,   180, false, "aqua", "yellow");
drawArc(150, 70, 60, 0,   100, true,  "green","white");
drawArc(250, 15, 50, 350, 170, false, "red",  "pink" );
drawArc(360, 60, 50, 350, 20,  true,  "blue", "purple");

function drawArc(xPos, yPos,
radius,
startAngle, endAngle,
anticlockwise,
lineColor, fillColor)
{
var startAngle = startAngle * (Math.PI/180);
var endAngle   = endAngle   * (Math.PI/180);

var radius = radius;

context.strokeStyle = lineColor;
context.fillStyle   = fillColor;
context.lineWidth   = 8;

context.beginPath();
context.arc(xPos, yPos,
radius,
startAngle, endAngle,
anticlockwise);
context.fill();
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.

Draw a arc with border and fill on HTML5 Canvas in JavaScript
Next »
« Previous