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>
<button id="btnAnim">Anime</button>
<br/>
<canvas id="c" width="400" height="400"></canvas>
<br/>
<textarea id="consoleArea" rows="10" cols="48"></textarea>

CSS

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

JavaScript

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();


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

var text = new fabric.Text('hello world', {
  fontSize: 30,
  top: 10,
  left: 10
});

var circle = new fabric.Circle({
  radius: 100,
  fill: '#eef',
  scaleY: 0.5,
  top: 20,
  left: 20    
});

var group = new fabric.Group([ text, circle ], {
  left: 50,
  top: 50,
  angle: -10
});

canvas.add(group);

function render(){
    group.set('top', group.get("top")+1);
    group.set('left', group.get("left")+1);
    canvas.renderAll();
    updateConsoleArea();
}

function updateConsoleArea(){
    var absoluteTopText = group.top+text.top;
    var absoluteLeftText = group.left+text.left;
    var absoluteTopCircle = group.top+text.top;
    var absoluteLeftCircle = group.left+text.left;
    
    var str = "group: top,left["+group.top+","+group.left+"]\n"
        + "text: top,left["+text.top+","+text.left+"] -- absoluteTop,absoluteLeft["+absoluteTopText+","+absoluteLeftText+"]\n"
    +"circle: top,left["+circle.top+","+circle.left+"] -- absoluteTop,absoluteLeft["+absoluteTopCircle+","+absoluteLeftCircle+"]";
    $("#consoleArea").text(str);
}


function animloop(){
    requestAnimFrame(animloop);
    render();
}

$("#btnAnim").click(function(){
    animloop();
});