Next »
1048/1956
« Previous

Draw an arc with control points in JavaScript

Description

The following code shows how to draw an arc with control points.

Example


<!--   w w w .  j  a v a2s .  c  om-->
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="500" height="840"></canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
var point1 = [ 100, 10 ];
var point2 = [ 200, 10 ];
var point3 = [ 200, 110 ];
ctx.fillStyle = "yellow";
ctx.strokeStyle = "black";
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.arcTo(50, 110, 40, 70, 100);
ctx.stroke();
drawPoint(100, 200);
drawPoint(20, 110);
drawPoint(20, 70);
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.lineTo(100, 110);
ctx.lineTo(20, 70);
ctx.stroke();
function drawPoint(x, y) {
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.strokeRect(x - 2, y - 2, 4, 4);
}
</script>
</body>
</html>

Click to view the demo

The code above generates the following result.

Draw an arc with control points in JavaScript
Next »
« Previous