Template with Twitter Bootstrap and Fabric.js

by boulabiar

HTML

<link rel="stylesheet" href="https://raw.github.com/twitter/bootstrap/01572f00bb5671aaab1763b85c9608c10362aef4/docs/assets/css/bootstrap.css">
<script src="https://raw.github.com/twitter/bootstrap/master/docs/assets/js/bootstrap.min.js"></script>
<script src="https://raw.github.com/kangax/fabric.js/master/dist/all.js"></script>
<button id="btnClipCanvas" class="btn btn-primary" title="Click here to clip your canvas" rel="tooltip">Clip Canvas</button>
<br/>
<canvas id="c" width="400" height="400"></canvas>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

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

#btnClipCanvas{
  margin: 5px 5px 5px 100px;
}

JavaScript

$("#btnClipCanvas").tooltip({
    placement: "bottom"
});

var src = "http://fabricjs.com/lib/pug.jpg";
// canvas
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = "#F5F5F5";

// initialize variables
var offsetTop = canvas.height, 
    offsetLeft = canvas.width,
    offsetBottom = canvas.height, 
    offsetRight = canvas.width;

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

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

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

canvas.renderAll();


// button Clip Canvas
$("#btnClipCanvas").click(function(){
    clipCanvas();
});


function clipCanvas() {
    var objects = canvas.getObjects();
    for (var i in objects) {
        // most near to top
        var tempOffsetTop = objects[i].top - objects[i].currentHeight/2;
        if(tempOffsetTop < offsetTop){
            offsetTop = tempOffsetTop;
        }
        // most near to left
        var tempOffsetLeft = objects[i].left - objects[i].currentWidth/2;
        if(tempOffsetLeft < offsetLeft){
            offsetLeft = tempOffsetLeft;
        }
        // most near to bottom
        var tempOffsetBottom = canvas.height - (objects[i].top + objects[i].currentHeight/2);
        if(tempOffsetBottom < offsetBottom){
            offsetBottom = tempOffsetBottom;
        }
        // most near to right
        var tempOffsetRight = canvas.width - (objects[i].left + objects[i].currentWidth/2);
        if(tempOffsetRight < offsetRight){
            offsetRight = tempOffsetRight;
        }
    }
    
    // pan object by offsetTop and...