Damned Bezier Curves…I love ‘em and I hate ‘em !!
Fail#1
A bezier curve cannot be expanded using another bezier curve:
Wikepedia: The curve at a fixed offset from a given Bézier curve, often called an offset curve (lying "parallel" to the original curve, like the offset between rails in a railroad track), cannot be exactly formed by a Bézier curve.
Fail#2
If you know your curves form a closed regular shape (has a center—centroid), you could use context.translate. Problem is your example bezier set does not have a centroid. If fact, not many bezier sets have a centroid.
Should work…but the math gives headaches
- Calculate many X/Y’s along the path that make up the beziers.
- At each X/Y, calculate the tangent angle to the curve.
- Calculate the perpendicular angle of that tangent angle.
- Move outward on that perpendicular line by the length you want to expand the bezier.
- Save the X/Y at that expanded point.
- Connect all the expanded points using context.lineTo.
Simple as that you have expanded a closed set of bezier curves!
I have some math for this, but it would take time to pull it together into a finished solution. If you give it a try, I’ll help if you have problems…