JSFiddle - React, Tailwind, and code Playground

by Couto

HTML

<script src="http://lokeshdhakar.com/projects/color-thief/js/libs/quantize.js"></script>
<script src="http://lokeshdhakar.com/projects/color-thief/js/color-thief.js"></script>
<canvas width="100%" height="100%"></canvas>
<div id="controls">
    <div id="pattern">Pattern <img class="hide" src="http://www.i-move.chicco.com/images/loader.gif" /></div>
    <div id="picture">Picture <img class="hide" src="http://www.i-move.chicco.com/images/loader.gif" /></div>
    <div id="shader">Shader <img class="hide" src="http://www.i-move.chicco.com/images/loader.gif" /></div>
</div>

CSS

html, body {
    font-family:'Helvetica Neue';
    color: #777;
    font-size: 12px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.hide {
    display: none;
}

#controls {
    position: absolute;
    bottom: 20px;
    left: 0px;
    right: 0px;
    height: 120px;
}
#controls div {
    width: 100px;
    height: 100px;
    background: #ddd;
    float: left;
    margin: 20px;
    border-radius: 5px;
    text-align: center;
    line-height: 100px;
}
canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 120px;
    background: #eee;
}

JavaScript

(function () {

    var $picture = $('#picture'),
        $pattern = $('#pattern'),
        $shader = $('#shader'),

        imageCanvas = document.createElement('canvas'),
        imageContext = imageCanvas.getContext('2d'),

        patternCanvas = document.createElement('canvas'),
        patternContext = patternCanvas.getContext('2d'),

        imageColors = [],
        patternColors = [],
        
       finalCanvas = document.querySelector('canvas'),
       finalContext = finalCanvas.getContext('2d');
    
    finalCanvas.width = document.body.offsetWidth;
    finalCanvas.height = document.body.offsetHeight;

    $pattern.on({
        'dragenter': function (evt) { evt.preventDefault(); },
        'dragover': function (evt) { evt.preventDefault(); },
        'drop': function (evt) {
            var event = evt.originalEvent,
                files = event.dataTransfer.files,
                file = files[0];

            evt.preventDefault();
            
            $pattern.find('img').toggleClass('hide');
            
            base64(file, function (url) {
                toImageElement(url, function (img) {
                    var size = getImageDimensions(img);

                    patternCanvas.width = size.width;
                    patternCanvas.height = size.height;

                    patternContext.drawImage(img, 0, 0);
                    patternColors = getAllColors(patternContext, size);
                    
                    patternColors = sortByLuma(patternColors);
                    
                    $pattern.find('img').toggleClass('hide');
                    
                    console.log(patternColors);
                });
            });
        }
    });
    
    $picture.on({
        'dragenter': function (evt) { evt.preventDefault(); },
        'dragover': function (evt) { evt.preventDefault(); },
        'drop': function (evt) {
            
            var event = evt.originalEvent,
                files =...