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 img02URL = 'http://fabricjs.com/lib/pug.jpg';

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

var svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="0" y="0" height="150" width="150" rx="15" ry="15" style="stroke:#006600;" fill="transparent"/></svg>';

fabric.loadSVGFromString(svg, function(objects, options) {
  obj = objects[0];
  canvas.add(obj);
  canvas.renderAll();
});


var pugImg = new Image();
pugImg.onload = function (img) {    
    var pug = new fabric.Image(pugImg, {
        angle: 45,
        width: 500,
        height: 500,
        left: 0,
        top: 0,
        scaleX: 0.3,
        scaleY: 0.3,

    });
    canvas.add(pug);
};
pugImg.src = img02URL;

setTimeout(function() {
  var clip = canvas.item(0);
  var obj = canvas.item(1);
  canvas.remove(clip);
  obj.clipTo = function(ctx) {
    clip.render(ctx);
	};
  canvas.renderAll();
},2000);