JSFiddle - React, Tailwind, and code Playground

by JThomas

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.8/fabric.min.js"></script>
<div id="shapes">
    <button class="add-shape" data-shape="stagingArea">Staging Area</button>
    <button class="add-shape" data-shape="jobTrailer">Job Trailer</button>
    <button class="add-shape" data-shape="spillKit">Spill Kit</button>
    <button class="add-shape" data-shape="concreteWashout">Concrete Washout Facility</button>
    <button class="add-shape" data-shape="restroomFacility">Restroom Facility</button>
    <button class="add-shape" data-shape="entrance">Rocked Entrance</button>
    <button class="add-shape" data-shape="ditchCheck" data-source="http://i.imgur.com/wVhEOhN.png">Ditch Check</button>
    <button class="add-shape" data-shape="inletProtect180" data-source="http://i.imgur.com/11ul04a.png">Inlet Protection (Open)</button>
    <button class="add-shape" data-shape="inletProtect360" data-source="http://i.imgur.com/UW2JeiG.png">Inlet Protection (Closed)</button>
    <button class="add-shape" data-shape="seedMatting" data-source="http://i.imgur.com/XUbMoXl.png">Seeding and Matting</button>
    <button class="add-shape" data-shape="violation">Violation</button>
</div>
<div class="canvas-wrapper">
    <canvas id="site-plan" width="500" height="400" />
</div>
<img id="map" src="http://www.placekitten.com/g/400/300" style="visibility: hidden;" />

CSS

#shapes{
    display: inline-block;
    width: 150px;
    vertical-align: top;
}

#shapes button{
    width: 100%;
}

.canvas-wrapper{
    display: inline-block;
    border: 1px solid #000;
}

JavaScript

window.sourceMap = document.querySelector('#map');
window.canvas = document.querySelector('#site-plan');

window.App = window.App || {};

//Set in the page
App.userColor = 'orange';
App.bg = 'http://www.placekitten.com/g/400/300';

var fabricCanvas = new fabric.Canvas(canvas, {
    isDrawingMode: false
});

fabricCanvas.setBackgroundImage(App.bg, fabricCanvas.renderAll.bind(fabricCanvas), {width: fabricCanvas.width, height: fabricCanvas.height});

var shapes = {
    //this == fabric canvas
    addStagingArea: function () {
        var options = {
            width: 200,
            height: 100,
            fill: 'transparent',
            stroke: App.userColor //This will change based on user
        };

        var rect = new fabric.Rect(options),
            text = new fabric.Text('Staging Area', {
                stroke: 'transparent',
                fill: App.userColor,
                fontSize: 16
            }),
            group = new fabric.Group([rect, text]);

        //Move the text to the center of the rectangle
        text.left = text.left + (rect.getWidth / 2);
        text.top = text.top + (rect.getHeight / 2);

        this.add(group);
    },

    addJobTrailer: function () {
        var options = {
            width: 200,
            height: 50,
            fill: 'transparent',
            stroke: App.userColor //This will change based on user
        };

        var rect = new fabric.Rect(options),
            text = new fabric.Text('Job Trailer', {
                stroke: 'transparent',
                fill: App.userColor,
                fontSize: 16
            }),
            group = new fabric.Group([rect, text]);

        //Move the text to the center of the rectangle
        text.left = text.left + (rect.getWidth / 2);
        text.top = text.top + (rect.getHeight / 2);

        this.add(group);
    },

    addSpillKit: function () {
        var options = {
            width: 50,
            height: 50,
            fill: 'transparent',
...