FabricJS - Clip object to bounding box

How to use a rect as a bounding box for an image or text to allow for a clipping region or bounding box.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.2.1/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.8/fabric.min.js"></script>
<script src="http://promincproductions.com/gaTrackingJSFiddle.js"></script>
<canvas id="c" width="400" height="400"></canvas>

CSS

#c {
    border:0px solid #ccc;
}

JavaScript

var canvas = new fabric.Canvas('c');

function roundedCorners(ctx) {
	var rect = new fabric.Rect({
    left:0,
    top:0,
    rx:20 / this.scaleX,
    ry:20 / this.scaleY,
    width:this.width,
    height:this.height,
    fill:'#000000'
  });
  rect._render(ctx, false);
}

fabric.Image.fromURL('http://fabricjs.com/lib/pug.jpg', function(img) {
  img.set({
    angle: 45,
    width: 500,
    height: 500,
    left: 140,
    top: 100,
    scaleX: 0.3,
    scaleY: 0.3,
    clipTo: roundedCorners.bind(img)
  });
  canvas.add(img).setActiveObject(img);
});