Block Game

by David Martins

HTML

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<canvas id="fabriccanvas"></canvas>

CSS

@font-face {
    font-family:'Indie Flower';
    font-style: normal;
    font-weight: 500;
    src: local('Indie Flower'), local('IndieFlower'), url(http://fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6hampu5_7CjHW5spxoeN3Vs.woff2) format('woff2'), url(http://fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6qRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
body, html {
    margin:0;
    padding:0;
}
#btns-display {
    position:relative;
    display:inline-block;
    height:40px;
    width:100%;
    float:left;
    border-bottom:1px solid black;
    z-index:10;
}
canvas {
    position:relative;
    display:inline-block;
    width:100%;
}

JavaScript

window.canvas = new fabric.Canvas('fabriccanvas');
var edgedetection = 8; //pixels to snap
canvas.selection = false;

window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {
    canvas.setHeight(window.innerHeight);
    canvas.setWidth(window.innerWidth);
    canvas.renderAll();
}

// resize on init
resizeCanvas();

//Initialize Everything
init();

function init(top, left, width, height, fill) {
    
    var bg = new fabric.Rect({
        left: 0,
        top: 0,
        fill:  "#eee",
        width: window.innerWidth,
        height: 75,    
        lockRotation: true,
        maxHeight: document.getElementById("fabriccanvas").height,
        maxWidth: document.getElementById("fabriccanvas").width,
        selectable: false,
    });
            
    var squareBtn = new fabric.Rect({
        top: 10,
        left: 18,
        width: 40,
        height: 40,
        fill: '#af3',
        lockRotation: true,
        originX: 'left',
        originY: 'top',
        cornerSize: 15,
        hasRotatingPoint: false,
        perPixelTargetFind: true,
    });
    
    var circleBtn = new fabric.Circle({
        radius: 20,
        fill: '#f55',
        top: 10,
        left: 105,
    });
    
    var triangleBtn = new fabric.Triangle({
        width: 40, 
        height: 35,
        fill: 'blue', 
        top: 15,
        left: 190,
    });
    
    
    
    var stairsBtn = new fabric.Rect({
        width: 40, 
        height: 35,
        stroke: 'black',
        top: 15,
        left: 290,
    });
    
    stairsBtn.setGradient('fill', {
      x1: 0,
      y1: stairsBtn.height,
      x2: stairsBtn.width,
      y2: stairsBtn.height,
      colorStops: {
        0: "red",
        1: "blue"
      }
    });
    
    var sqrText = new fabric.IText("Add Square", {
        fontFamily: 'Indie Flower',
        fontSize: 14,
        fontWeight: 'bold',
        left: 6,
        top: 50,
        selectable: false,
    });
    
    var cirText = new...