For a live sample please click here or see below the snippet
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Drawing Arc Between Two Points using Canvas</title>
<script language="javascript">
function DrawArc()
{
var drawingCanvas = document.getElementById('sampleCanvas');
if(drawingCanvas.getContext)
{
var context = drawingCanvas.getContext('2d');
context.clearRect(0,0,600,600);
context.beginPath();
context.moveTo(30,30);
context.lineTo(200,30);
context.arcTo(400,30,400,800,100);//left 1,top 1,left 2,top 2,radius
context.lineTo(400,400);
context.stroke();
//context.fill();
}
}
</script>
</head>
<body>
<canvas id="sampleCanvas" width="600" height="600" style="border:1px solid #000000">
<p>Your browser doesn't support canvas.</p>
</canvas>
<script>
DrawArc();
</script>
</body>
</html>





1 comment
[...] http://www.snippetdirectory.com/html5/drawing-arc-between-two-points-using-canvas/ [...]