Implementing ClipTo function on fabricjs canvas
<p>I am able to clip my canvas to a shape if I hardcode the SVG when the canvas initially loads. Now I am trying to do this with a click function. The challenge is that since everything has loaded, when I click on it and load the clipping function, it clears my canvas and leaves just the shape and background. I'm looking for ideas on how to implement this. I only know how to load the <code>opts</code> in a <code>new</code> <code>fabric.canvas</code> function. I suspect I will have to get the current canvas data and then apply the <code>opts</code> parameter to it, but I am not sure the best way to do it. Here is my code:</p>

<pre><code>var canvas = new fabric.Canvas('imageCanvas');

$('#shape').on('click', function(){

var clipPath = new fabric.Path("M161.469,0.007 C161.469,0.007 214.694,96.481 214.694,96.481 C214.694,96.481 322.948,117.266 322.948,117.266 C322.948,117.266 247.591,197.675 247.591,197.675 C247.591,197.675 261.269,306.993 261.269,306.993 C261.269,306.993 161.469,260.209 161.469,260.209 C161.469,260.209 61.667,306.993 61.667,306.993 C61.667,306.993 75.346,197.675 75.346,197.675 C75.346,197.675 -0.010,117.266 -0.010,117.266 C-0.010,117.266 108.242,96.481 108.242,96.481 C108.242,96.481 161.469,0.007 161.469,0.007", ),    

opts = {
  controlsAboveOverlay: true,
  backgroundColor: 'rgb(255,255,255)',
  clipTo: function (ctx) {
    if (typeof backgroundColor !== 'undefined') {
      ctx.fillStyle = backgroundColor;
      ctx.fillRect(0, 0, 900, 900);
    }
    clipPath.render(ctx);
  }
}
    //obviously this is not going to work
    var reloadShape = JSON.stringify(canvas); 
    canvas.loadFromJSON(reloadShape);
    new fabric.Canvas('imageCanvas', opts);

});
</code></pre>