JSFiddle - React, Tailwind, and code Playground

by not important

HTML

<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<table id="bitmask-control">
    <tbody>
        <tr>
            <td><input type="checkbox" data-index="3" /></td>
            <td><input type="checkbox" data-index="4" /></td>
            <td><input type="checkbox" data-index="0" /></td>
        </tr>
        <tr>
            <td><input type="checkbox" data-index="7" /></td>
            <td><input type="checkbox" disabled="disabled" checked /></td>
            <td><input type="checkbox" data-index="5" /></td>
        </tr>
        <tr>
            <td><input type="checkbox" data-index="2" /></td>
            <td><input type="checkbox" data-index="6" /></td>
            <td><input type="checkbox" data-index="1" /></td>
        </tr>
    </tbody>
</table>
<div>
    <div id="canvas-container"></div>
</div>
<div>
    <div id="image-container"></div>
</div>

CSS

input[type=checkbox]:not([disabled]):hover {
    cursor: pointer;
}

canvas {
    margin-left: 8px;
}

CoffeeScript

colors = [
    {
        base: '#01aaff'
        layer0: '#bbeeff'
        layer1: '#e6c484'
        layer2: '#60c62f'
    },
    {
        base: '#60c62f'
        layer0: '#d2a236'
        layer1: '#b2c08b'
        layer2: '#cbd4ce'
    }
]

tileOptions =
    size: 16

Tile = (x, y, size) ->
    shape = new createjs.Shape
    graphics = shape.graphics

    shape.x = x
    shape.y = y

    to = {
        s100: size
    }
    to.s25 = to.s100 * 0.25
    to.s50 = to.s100 * 0.5
    to.s75 = to.s100 * 0.75

    drawBase = (color) ->
        graphics.beginFill color
        graphics.drawRect 0, 0, to.s100, to.s100
        graphics.endFill()
    
    drawInstructions = {
        0: ->
        16: (g, o, c) -> # north
            g.f c
            g.mt to.s25 - o, 0
            g.bt to.s25 - o, to.s75 + o, to.s75 + o, to.s75 + o, to.s75 + o, 0 
            g.ef()
        32: (g, o, c) -> # east
            g.f c
            g.mt to.s100, to.s25 - o
            g.bt to.s25 - o, to.s25 - o, to.s25 - o, to.s75 + o, to.s100, to.s75 + o
            g.ef()
        48: (g, o, c) -> # north, east
            g.f c
            g.mt to.s50 - o, 0
            g.bt to.s50 - o, to.s50 + o, to.s50 - o, to.s50 + o, to.s100, to.s50 + o
            g.lt to.s100, 0
            g.lt to.s50 - o, 0
            g.ef()
        64: (g, o, c) -> # south
            g.f c
            g.mt to.s25 - o, to.s100
            g.bt to.s25 - o, to.s25 - o, to.s75 + o, to.s25 - o, to.s75 + o, to.s100
            g.ef()
        80: (g, o, c) -> # north, south
            g.f c
            g.dr to.s25 - o, 0, to.s50 + (o * 2), to.s100
            g.ef()
        96: (g, o, c) -> # east, south
            g.f c
            g.mt to.s50 - o, to.s100
            g.bt to.s50 - o, to.s50 - o, to.s50 - o, to.s50 - o, to.s100, to.s50 - o
            g.lt to.s100, to.s100
            g.lt to.s50 - o, to.s100
            g.ef()
        112: (g, o, c) -> # north, east, south
            g.f c
            g.dr to.s50 -...