Template with Twitter Bootstrap and Fabric.js

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://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
<button id="btnLoadImage" class="btn btn-primary" title="Click here to load an big image" rel="tooltip">Load Image</button>
<button id="btnExportBase64Canvas" class="btn btn-primary" title="Click here to export the canvas as a base64" 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{
  margin: 5px;
  border-width: 1px;
  border-style: solid;
  border-color: #000;
}

.btn{
  margin: 5px;
}

JavaScript

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

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

// button LoadImage handler
$("#btnLoadImage").click(function(){
    // 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 ExportBase64Canvas handler
$("#btnExportBase64Canvas").click(function(){

});