Template with Twitter Bootstrap and Fabric.js

by rodrigopandini

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="btnAddColor" class="btn btn-primary" title="Click to add a color option" rel="tooltip">Add</button>
<br/>
<div id="containerColorsOptions"></div>

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

#containerColorOptions{
  padding: 20px;
}

.colorOption{
    width: 25px; 
    height: 25px; 
    margin: 2px; 
    float: left; 
}

.removeColor{
    background: url('http://cdn1.iconfinder.com/data/icons/sanscons/black/to_size/close.gif') no-repeat right top;
}

JavaScript

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

var arrayPossibleColors = [];

$("#btnAddColor").click(function(e){
    var possibleColor = '#'+Math.floor(Math.random()*16777215).toString(16);
    arrayPossibleColors.push(possibleColor);
    var i = arrayPossibleColors.length - 1;
    $("#containerColorsOptions").append("<div id='possibleColor_"+ i +"' class='colorOption' style='background-color:"+ possibleColor +"'></div>"); 
    $("#possibleColor_"+i).hover(function(e){
        $(this).addClass("removeColor");
        $(this).click(function(e){   
            if(e.offsetX > 16 && e.offsetY < 8){
                $(e.target).remove();
            }
        });
    });
    $("#possibleColor_"+i).mouseout(function(e){
        $(this).removeClass("removeColor");
    });
});