HTML5 Canvas Cookbook

Drawing a Bezier curve

If Quadratic curves don't meet your needs, the Bezier curve might do the trick. Also known as cubic curves, the Bezier curve is the most advanced curvature available with the HTML5 canvas API.

How to do it...

Follow these steps to draw an arbitrary Bezier curve:

1. Define a 2D canvas context and set the curve style:

   window.onload = function(){
       var canvas = document.getElementById("myCanvas");
       var context = canvas.getContext("2d");
     
       context.lineWidth = 10;
       context.strokeStyle = "black"; // line color
       context.moveTo(180, 130);

2. Position the canvas context and draw the Bezier curve:

   context.bezierCurveTo(150, 10, 420, 10, 420, 180); context.stroke(); ...