Clip canvas to usable area in Fabric.js

https://groups.google.com/forum/?fromgroups#!topic/fabricjs/BLuSVVigIrc%5B1-25%5D

by rodrigopandini

HTML

<script src="https://raw.github.com/kangax/fabric.js/feature/dynamic_origin/dist/all.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>

CSS

canvas{
  border-width: 1px;
  border-style: solid;
  border-color: #000;
}

JavaScript

var srcImg = "http://fabricjs.com/lib/pug.jpg";

// canvas
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = "#F5F5F5";

// circle
var circle = new fabric.Circle({
    left: 50,
    top: 50,
    radius: 25,
    fill: "#dd0000"
});
circle.set("hasRotatingPoint", true);
canvas.add(circle);

// text
var text = new fabric.Text('Text', { 
    left: 110, 
    top: 110 
});
text.set("hasRotatingPoint", true);
canvas.add(text);

// image
fabric.util.loadImage(srcImg, function(img) {
    var object = new fabric.Image(img);
    object.set({ 
        left: 200, 
        top: 200
    });
    object.set("hasRotatingPoint", true);
    object.set("scaleX", .25);
    object.set("scaleY", .25);
    canvas.add(object);
    canvas.renderAll();    
});

canvas.renderAll();