Canvas Bézier Curves

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();

Related posts