title: Fabric.js: clip everything but overlay image
body: <p>My code on js fiddle:
  <a href="http://jsfiddle.net/tbqrn/170/" rel="nofollow">http://jsfiddle.net/tbqrn/170/</a></p>
  
  <pre><code>var img02URL = 'http://fabricjs.com/lib/pug.jpg';
  
  var canvas = new fabric.Canvas('c');
  
  //frame image, should be displayed fully.
  canvas.setOverlayImage('http://cdn.1001freedownloads.com/vector/thumb/107559/Pink_Hearts_Frame.png',           canvas.renderAll.bind(canvas), {
          width: canvas.width,
          height: canvas.height 
      });
  canvas.selection = false;
  
  //rectangle that hides everithing around it.
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.rect(50,50,300,300);
  ctx.closePath();
  ctx.stroke();
  ctx.clip();
  
  //the image that should stay inside the frame
  fabric.Image.fromURL(img02URL, function(oImg) {
      oImg.scale(.25);
      oImg.left = 140;
      oImg.top = 140;
      canvas.add(oImg);
      canvas.renderAll();
  });
  </code></pre>
  
  <p>In my current approach everything around rectangle is hidden even overlay image. I want to hide everything but overlay image, so the frame is displayed fully. How can I do that?</p>