Template with Twitter Bootstrap and Fabric.js

by secretgspot

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>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<div class="container">
    <div class="row">
<div class="span2">
    <div id="btnGroup" class="btn-group">
        <button id="btnCreateCircle" class="btn btn-small" title="Circle" rel="tooltip"><i class="icon-adjust"></i></button>
    </div>
    
    <ul id="containerLayers">
    </ul>
</div>
<div class="span10">
    <canvas id="c" width="400" height="400"></canvas>
</div>
</div>
</div>

CSS

@import url('http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css');
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
    
canvas{
  border-width: 1px;
  border-style: solid;
  border-color: #000;
  margin: 5px; 
}
#btnGroup{
  margin: 5px 5px 10px 3px;
}
#containerLayers { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
}
#containerLayers li { 
    margin: 0 3px 3px 3px; 
    padding: 0.4em; 
    padding-left: 1.5em;
    height: 15px; 
}
#containerLayers li span { 
    position: absolute; 
    margin-left: -1.3em; 
}

JavaScript

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

$("#btnCreateCircle").click(function(evt){
    // object
    var circle = new fabric.Circle({
        left: 50,
        top: 50,
        radius: 25,
        fill: "#dd0000"
    });
    circle.hasRotatingPoint = true;
    canvas.add(circle);
    var s = circle.clone();
    s.set('top',150);
    canvas.add(s);
    canvas.renderAll();
    
   
});

$("#btnCreateText").click(function(evt){
    // object
    var text = new fabric.Text('Text', { 
        left: 80, 
        top: 80 
    });
    text.hasRotatingPoint = true;
    canvas.add(text);
    canvas.renderAll();
    
});