<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const p1 = { x: 10, y: 10 }; //始点
const p2 = { x: 380, y: 380 }; //終点
const cp1 = { x: 60, y: 360 }; //制御点1
const cp2 = { x: 340, y: 10 }; //制御点2
// 補助線の描画
[[p1, cp1], [p2, cp2]].forEach(function (p) {
context.beginPath();
context.moveTo(p[0].x, p[0].y);
context.lineTo(p[1].x, p[1].y);
context.lineWidth = 5;
context.strokeStyle = 'gray';
context.stroke();
});
// ベジェ曲線の描画
context.beginPath();
context.moveTo(p1.x, p1.y);
context.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, p2.x, p2.y);
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
// 点の描画
[p1, p2, cp1, cp2].forEach(function (p) {
context.beginPath();
context.arc(p.x, p.y, 10, 0, Math.PI * 2, false);
context.fillStyle = 'blue';
context.fill();
});
</script>