title: Implementing ClipTo function on fabricjs canvas
body: <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>