Bezier Curve
by moonou
HTML
<canvas width="400" height="400" id="canvas"></canvas>JavaScript
let canvas = document.querySelector('#canvas')
let ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.moveTo(0, 0)
ctx.bezierCurveTo(0, 200, 150, 150, 200, 200)
ctx.stroke()
ctx.fillStyle = "green"
ctx.fillRect(0, 0, 10, 10)
ctx.fillRect(200, 200, 10, 10)
ctx.fillRect(0, 200, 10, 10)
ctx.fillRect(150, 150, 10, 10)
ctx.font = "14px serif"
ctx.fillText('p0(0,0)', 14, 14)
ctx.fillText('p1(200,200)', 200, 200)
ctx.fillText('p2(0,200)', 0, 200)
ctx.fillText('p3(150,150)', 150, 150)