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";


var redToOrangeGradient = {   
  x1: "50%",  // For a vertical gradient, the x1 & y1 don't matter as long as they are the same
  y1: "0%",   // The top of the gradient will be at the top of the object
  x2: "50%",
  y2: "100%", // The bottom of the gradient will be at the bottom of the object
  colorStops: {
    0: "#FF0000",
    1: "#FFFF00"
  }
};

// circle
var circle = new fabric.Circle({
    left: 50,
    top: 50,
    radius: 25,
    fill: redToOrangeGradient
});
    
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();