JSFiddle - React, Tailwind, and code Playground

by Piyush Jha

HTML

<h4>@Hackinet <3</h4>
<canvas id="canvas" width=150 height=150></canvas>
<canvas id="canvas" width=150 height=150></canvas>
<ul id="drag" style="display:inline-block">
    <li class="new-item" style="display:inline-block"><div class="numberCircle">1</div></li>
<li class="new-item" style="display:inline-block"><div class="numberCircle">2</div></li>
<li class="new-item" style="display:inline-block"><div class="numberCircle">3</div></li>
<li class="new-item" style="display:inline-block"><div class="numberCircle">4</div></li>
<li class="new-item" style="display:inline-block"><div class="numberCircle">5</div></li>
</ul>

CSS

body {
    background-color: ivory;
}
canvas {
    border:1px solid black;
}
.numberCircle {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */

    width: 18px;
    height: 18px;
    padding: 4px;

    background: green;
    border: 2px solid green;
    color: white;
    text-align: center;

    font: 16px Arial, sans-serif;
}

JavaScript

// get reference to the canvas and its context
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "16px helvetica";

// variables

// some text objects defining text on the canvas
var texts = [];

// variables used to get mouse position on the canvas
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();

// variables to save last mouse position
// used to see how far the user dragged the mouse
// and then move the text by that distance
var startX;
var startY;

// this var will hold the index of the selected text
var selectedText = -1;


// make the <li> draggable 
$("li").draggable({
    helper: 'clone'
});

// drop on canvas
$("#canvas").droppable({
    accept: "li",
    drop: function (event, ui) {
        ctx.fillText($(ui.draggable).clone().text(), ui.position.left - event.target.offsetLeft, ui.position.top - event.target.offsetTop);

        var text = $(ui.draggable).clone().text();
        var x = ui.position.left - event.target.offsetLeft;
        var y = ui.position.top - event.target.offsetTop;
        var width = ctx.measureText(text).width;
        var height = 16;

        // save this text info in an object in texts[]
        texts.push({
            text: text,
            x: x,
            y: y,
            width: width,
            height: height
        });

        // draw all texts to the canvas
        draw();

    }
});

// clear the canvas draw all texts
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < texts.length; i++) {
        var text = texts[i];
        ctx.fillText(text.text, text.x, text.y);
    }
}

// test if x,y is inside the bounding box of texts[textIndex]
function textHittest(x, y, textIndex) {
    var text = texts[textIndex];
    return (x >= text.x && x <= text.x + text.width && y >= text.y -...