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.
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:
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:
- X position of the first curve control point (from left)
- Y position of the first curve control point (from top)
- X position of the second curve control point
- Y position of the second curve control point
- X position of the curve end point
- 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:
View demo
The 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
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.