This is a demo for the Canvas: An Awesome Introduction article.
This demonstration shows how Bézier curves can be drawn on a canvas element. Drag the line ends, or the control points to change the curve.
canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d") ctx.lineWidth = 6; ctx.strokeStyle = "#333"; ctx.beginPath(); ctx.moveTo(100, 250); ctx.bezierCurveTo(150, 100, 350, 100, 400, 250); ctx.stroke();

Technical SEO specialist, JavaScript developer and senior full-stack developer. Owner of getButterfly.com.
If you like this article, go ahead and follow me on Twitter or buy me a coffee to support my work!