JSFiddle - React, Tailwind, and code Playground

HTML

<div id="loading">Loading images<span class="blink">...</span></div>


<div id="main">

    <div><canvas id="maincanvas"></canvas></div>
    <div><canvas id="secondcanvas"></canvas></div>
    <div><canvas id="thirdcanvas"></canvas></div>
    <br />
    <div><canvas id="fourthcanvas"></canvas></div>
    <div><canvas id="fifthcanvas"></canvas></div>
    <div><canvas id="sixcanvas"></canvas></div>




</div>

CSS

#main div { display:inline-block;}

.hidden {
    display: none;
}
canvas {
    border: 1px solid #222;
    cursor: pointer;
}

JavaScript

//target = document.getElementById('maincanvas')
var scratch = function(target, img) {
    
     var image = { // back and front images
        'back': { 'url':'http://artsmorgan.com/scratch/app-img/APP_CODE/' + img +'', 'img':null },
        'front': { 'url':'http://artsmorgan.com/scratch/app-img/APP_CODE/cover.jpg', 'img':null }
    };
    
    var canvas = {'temp':null, 'draw':null}; // temp and draw canvases
    
    var mouseDown = false;
    
    /**
     * Helper function to get the local coords of an event in an element,
     * since offsetX/offsetY are apparently not entirely supported, but
     * offsetLeft/offsetTop/pageX/pageY are!
     *
     * @param elem element in question
     * @param ev the event
     */
    function getLocalCoords(elem, ev) {
        var ox = 0, oy = 0;
        var first;
        var pageX, pageY;
    
        // Walk back up the tree to calculate the total page offset of the
        // currentTarget element.  I can't tell you how happy this makes me.
        // Really.
        while (elem != null) {
            ox += elem.offsetLeft;
            oy += elem.offsetTop;
            elem = elem.offsetParent;
        }
    
        if (ev.hasOwnProperty('changedTouches')) {
            first = ev.changedTouches[0];
            pageX = first.pageX;
            pageY = first.pageY;
        } else {
            pageX = ev.pageX;
            pageY = ev.pageY;
        }
    
        return { 'x': pageX - ox, 'y': pageY - oy };
    }
    
    /**
     * Recomposites the canvases onto the screen
     *
     * Note that my preferred method (putting the background down, then the
     * masked foreground) doesn't seem to work in FF with "source-out"
     * compositing mode (it just leaves the destination canvas blank.)  I
     * like this method because mentally it makes sense to have the
     * foreground drawn on top of the background.
     *
     * Instead, to get the same effect, we draw the whole foreground image,
     * and then mask...