JSFiddle - React, Tailwind, and code Playground

by fkhairzad

HTML

<h5>Add Images and Canvases with the buttons<br>
      Click to select which image to move.<br>
      Then move the mouse to desired drop location<br>
      and click again to drop the image there.</h5> 
<button id="more">Add Image</button>
<button id="diff">Add Different Image</button>
<button id="moreCanvas">Add Canvas</button>
<button id="saveCanvasStates">Save Canvases</button>
<br>
<canvas height="125" width="700" id="addedcanvases1">[No canvas support]</canvas>
<br>
<canvas height="125" width="350" id="addedcanvases2">[No canvas support]</canvas>
<canvas height="125" width="350" id="addedcanvases3">[No canvas support]</canvas>
    <br><br><br>

CSS

body {
    background-color: white;
    padding:20px;
}
canvas {
    border: 1px solid #808080;
    margin: 5px;
}
#addedcanvases1 {
    border: 10px solid #808080;
}
.wrapper {
    float:left;
    margin: 5px;
    /*border:1px solid blue;*/
    width:360px;
}
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

JavaScript

// canvas stuff
var contexts = [];
var canvasWidth = 350;
var canvasHeight = 125;

// permanent canvases
var canvas1 = document.getElementById("addedcanvases1");
var canvas2 = document.getElementById("addedcanvases2");
var canvas3 = document.getElementById("addedcanvases3");
contexts.push(canvas1.getContext('2d'));
contexts.push(canvas2.getContext('2d'));
contexts.push(canvas3.getContext('2d'));

canvas1.onclick = function (e) {
    handleClick(e, 1);
};
canvas2.onclick = function (e) {
    handleClick(e, 2);
};
canvas3.onclick = function (e) {
    handleClick(e, 3);
};

canvas1.onmousemove = function (e) {
    handleMousemove(e, 1);
}
canvas2.onmousemove = function (e) {
    handleMousemove(e, 2);
}
canvas3.onmousemove = function (e) {
    handleMousemove(e, 3);
}
// end of permanent canvases setup

// image stuff
var states = [];

var img = new Image();
img.onload = function () {}
img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMv7Dlgb7rpKsi2Z0YIp6nuB2mRFAPmwN95qihDE3NlDxYs-T2fA";

var img1 = new Image();
img1.onload = function () {}
img1.src = "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQGXtdzOFxnVPk7EzvAKIK230UsoxCEmgI_g1fy0EV0hkpweqq7";


function clearAll() {
    // for the permanent canvases
    canvas1.width = canvas1.width
    canvas2.width = canvas2.width
    canvas3.width = canvas3.width

    // Clear all canvases
    for (var i = 0; i < contexts.length; i++) {
        var context = contexts[i];
        context.clearRect(0, 0, canvasWidth, canvasHeight);
    }
}


function handleClick(e, contextIndex) {

    e.stopPropagation();

    var mouseX = parseInt(e.clientX - e.target.offsetLeft + $(document).scrollLeft());
    var mouseY = parseInt(e.clientY - e.target.offsetTop + $(document).scrollTop());

    clearAll();

    for (var i = 0; i < states.length; i++) {

        var state = states[i];

        if (state.dragging) {
            state.dragging = false;
            state.draw();
            continue;
        }

       ...