Dynamically creating a reusable, editable, and savable clipping path with bezierCurveTo() for image masking in canvas

I want to dynamically create, with mouse, savable, reusable and editable bezier curve paths comprising moveable points and handles just like the pen tool allows in Photoshop. I would use these for masking parts of an image for composite layering. I’m looking for a lightweight vanilla javascript solution that I can work with, expand, and learn from.

Because of my current very little knowledge of HTML5 canvas applications, I could only programmatically supply clipping path values via bezierCurveTo() for masking an image through an irregular shape, but I am looking for a solution that allows me to dynamically draw, edit, reuse, and save clipping paths for image mask creation just like the pen tool in Photoshop provides. Here is the programmatical version I tried so far in this fiddle:

Note: Using img.onload for example only.

// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

// Create an image element
var img = document.createElement('IMG');

// When the image is loaded, draw it
img.onload = function () {

// Save the state, so we can undo the clipping
ctx.save();

var xoff = 10; //  pixel x-offset of handle (when moved dynamically)
var yoff = 10; //  pixel y-offset of handle (when moved dynamically)
    
// This is the irregular shape
ctx.beginPath();
ctx.moveTo(29 + xoff, 55 + yoff);
ctx.bezierCurveTo(18 + xoff, 37 + yoff, 39 + xoff, 16 + yoff, 48 + xoff, 28 + yoff);
ctx.bezierCurveTo(82 + xoff, 75 + yoff, 162 + xoff, 5 + yoff, 155 + xoff, 18 + yoff);
ctx.bezierCurveTo(128 + xoff, 73 + yoff, 154 + xoff, 123 + yoff, 167 + xoff, 131 + yoff);
ctx.bezierCurveTo(186 + xoff, 143 + yoff, 111 + xoff, 145 + yoff, 96 + xoff, 148 + yoff);
ctx.bezierCurveTo(81 + xoff, 151 + yoff, 24 + xoff, 154 + yoff, 34 + xoff, 135 + yoff);
  
ctx.closePath();

// Clip to the current path
ctx.clip();
    
ctx.drawImage(img, 0, 0);
    
// Undo the clipping
ctx.restore();
}

// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";

In attempting to solve my problem, I analyzed pertinent code made freely available in this post, but I can’t quite grasp how to conjugate only what is strictly needed for implementing the dynamic aspect of drawing clipping paths with bezierCurveTo().

Lastly, I want to implement the clipping path functionality into this freely available javascript-canvas-image-mask application. I would add a pen tool option right over the paint brush tool option that is already implemented in that code. Therefore, the javascript-canvas-image-mask application will be the UI/UX template used to provide both pen and paint brush tools for image masking.

So any working samples, hints or suggestions you want to offer me should be applicable to the javascript-canvas-image-mask application mentioned in the above link. Lean and simple is best – I’m not interested in adopting existing frameworks because they usually provide many more functionality than I actually need.

Thank you for your guidance, can’t wait to get my hands more dirty on this one.