draws an arc to a point
Description
arcTo(x1, y1, x2, y2,rad) draws an arc to (x2, y2) that passes (x1, y1) and has radius rad
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
canvas {<!--from w w w. j ava 2 s. c o m-->
border: thin solid black
}
body>* {
float: left;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="840">
Your browser doesn't support the <code>canvas</code> element
</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>