title: Prevent Fabric JS object to be visible out of the boundaries
body: <p>I have 2 rectangles. When small rectangle is moved outside of the bigger rectangle, I want the small rectangle's areas outside of the boundary become invisible. </p>
  
  <p>If half of small rectangle is inside and half outside. Then only half of it will be visible, this <a href="http://xpressclocks.azurewebsites.net/create" rel="nofollow noreferrer">example</a> works this way.</p>
  
  <p>How can I achieve this ?</p>
  
  <p><a href="http://jsfiddle.net/Qanary/kh033wcf/" rel="nofollow noreferrer">My JSFiddle </a></p>
  
  <pre><code>(function() {
    var canvas = this.__canvas = new fabric.Canvas('canvas');
    fabric.Object.prototype.transparentCorners = false;
  
    // create a rectangle with a fill and a different color stroke
    var rect = new fabric.Rect({
      left: 50,
      top: 50,
      width: 150,
      height: 250,
      fill: 'transparent',
      stroke: 'rgba(34,177,76,1)',
      strokeWidth: 1
    });
  
    var rect2 = new fabric.Rect({
      left: 50,
      top: 50,
      width: 50,
      height: 50,
      fill: 'rgba(34,50,100,1)',
      stroke: 'rgba(34,177,76,1)',
      strokeWidth: 1
    });
    canvas.add(rect);
    canvas.add(rect2);
  })();
  </code></pre>
  
  <p>Example here works with this way:</p>