Today we’re going to draw a balloon on the HTML5 canvas element. Why not, right? Here’s the final result:

The balloon shape is basically a circle stretched out in various places. However, it’s not that straightforward to simply draw a circle and then stretch it with the canvas API. Instead, we need to recreate a circle using four cubic Bézier curves:

After beginning this process, I discovered that it is actually impossible to create a perfect circle using cubic Bézier curves. Instead, you can only get a very close approximation using a constant called “kappa”. So to calculate the length of the “handles” (or the distance from a control point to a corresponding point on the curve), we use the following formula:

Now we can create a near-perfect circle using four, separate cubic Bézier curves, created with the bezierCurveTo method:

Once we have our circle in place, we can stretch out the curves to create the balloon shape. I just fiddled around and came out with arbitrary values for the factors used to stretch the shape. For example, I stretched out the bottom using a heightDiff value, calculated as follows:

We can now modify the above circle equation to use these values:

To add color to the balloon, I used a radial gradient with, again, some arbitrary values thrown in there:

To calculate the gradient colors, I found this fantastic color manipulation library, that makes working with colors a snap: