Block Game

by ryanverdel

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();
    
    if (canvas._objects[0]) {
        canvas._objects[0].set('width', window.innerWidth);
        canvas.renderAll();
    } 
}


// resize on init & window resize
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: '#7e7f80',
        lockRotation: true,
        originX: 'left',
        originY: 'top',
        cornerSize: 15,
        hasRotatingPoint: false,
        perPixelTargetFind: true,
    });
    
    var circleBtn = new fabric.Circle({
        radius: 20,
        fill: '#7e7f80',
        top: 10,
        left: 105,
    });
    
    var triangleBtn = new fabric.Triangle({
        width: 40, 
        height: 35, 
        fill: '#7e7f80', 
        top: 15,
        left: 190,
    });
    
    var sqrText = new fabric.IText("Add Square", {
        fontFamily: 'Indie Flower',
        fontSize: 14,
        fontWeight: 'bold',
        left: 6,
        top: 50,
        selectable: false,
        hasControls: false,
        lockMovementX:true,
        lockMovementY:true, 
        hoverCursor: 'default',
        
    });
    
    var cirText = new fabric.IText("Add Circle", {
        fontFamily: 'Indie Flower',
        fontSize: 14,
    ...