HTML5 Canvas

HTML5 Canvas: Bezier curves

HTML5 Canvas: Bezier curves

Following on from my post about straight line paths, now would be a good time to look into bezier curves. With these, we can create an even larger array of shapes.

Bezier curve path

A bezier curve has four points: a starting point, an ending point, and two control handles which determine how it is going to curve. Whenever the handles are moved, this controls the curve shape.

HTML5 Canvas bezier curve path

View demo

The markup

The context bezierCurveTo is used to create a curve. You can see that initially, I’ve moved the starting point to my desired position by using the moveTo context:

View markup

Javascript portion

function draw() {	
    	// Bezier curve
    	var canvas = document.getElementById("bezierCurve");
    	if (canvas.getContext) {
        	var ctx = canvas.getContext("2d");

        	ctx.beginPath();
        	ctx.moveTo(160, 40);
        	ctx.bezierCurveTo(90, 10, 60, 20, 10, 90);

        	ctx.lineWidth = 7;
        	ctx.stroke();
    	}
}

HTML portion

<body onLoad="draw();">
    	<canvas id="bezierCurve" width="178" height="100"></canvas>
</body>

As you can see, there are six numbers as the parameters for bezierCurveTo. These mean as follows:

  1. X position of the first curve control point (from left)
  2. Y position of the first curve control point (from top)
  3. X position of the second curve control point
  4. Y position of the second curve control point
  5. X position of the curve end point
  6. Y position of the curve end point

Then to finish off, I’ve just added a stroke to the path so we can see it.

Creating shapes with bezier curves

Using this knowledge and a little patience, I can create pretty much any shape we desire. Here, I have created a flower shape with bezier curves:

HTML5 Canvas filled flower shape with bezier curves

View demo

The markup

View markup

Javascript portion

function draw() {
    	// Filled flower shape
    	var canvas = document.getElementById("bezierFlower");
    	if (canvas.getContext) {
        	var ctx = canvas.getContext("2d");

        	ctx.beginPath();
        	ctx.moveTo(130.3, 37.6);
        	ctx.bezierCurveTo(126.0, -8.3, 56.3, -16.6, 47.4, 37.6);
        	ctx.bezierCurveTo(-1.4, 33.0, -17.0, 93.7, 21.9, 115.6);
        	ctx.bezierCurveTo(5.6, 158.7, 55.0, 192.7, 88.8, 162.3);
        	ctx.bezierCurveTo(119.3, 191.4, 172.3, 162.0, 155.7, 115.7);
        	ctx.bezierCurveTo(192.0, 98.4, 183.6, 33.7, 130.3, 37.6);
        	ctx.closePath();

        	ctx.fill();  
    	}
}

HTML portion

<body onLoad="draw();">
    	<canvas id="bezierFlower" width="178" height="174"></canvas>
</body>

Adobe Illustrator Ai to Canvas plugin

Ai to Canvas logo

Visit site

Creating bezier curves from scratch can be very hit and miss, and unless you’re a maths whizz, it will probably take you forever to figure out how to create a particular shape with them.

Luckily, there is a fantastic Adobe Illustrator plugin, which can save out your paths, however complex, into Canvas format.

It’s a good idea to assess the path you want to save out in Illustrator before you export it to make sure that it doesn’t contain unnecessary points, and then the code after it’s been created by the plugin. This is so you can streamline it, as a huge stream of markup for a shape that should be simple is never a good thing and could give you problems later on.