JSFiddle - React, Tailwind, and code Playground

by ofirattia

HTML

<canvas id="canvas_0" class="login"  width="130" height="130"></canvas>
<canvas id="canvas_1" class="support"  width="130" height="130"></canvas>
<canvas id="canvas_2" class="demo"  width="130" height="130"></canvas>
<canvas id="canvas_3" class="video"  width="130" height="130"></canvas>
<canvas id="canvas_4" class="help"  width="130" height="130"></canvas>
<canvas id="canvas_5" class="exit"  width="130" height="130"></canvas>
<canvas id="canvas_6" class="video1"  width="130" height="130"></canvas>
<canvas id="canvas_7" class="video3"  width="130" height="130"></canvas>
<canvas id="canvas_8" class="video3"  width="130" height="130"></canvas>
<canvas id="canvas_9" class="video3"  width="130" height="130"></canvas>

JavaScript

var b = "2";
var w = 110;
var h = 110;
var x = 5;
var y = 5;
var isShadowed = false;

var canvas = [],
    context = [],
    $canvas = [],
    canvasOffset = [],
    offsetX = [],
    offsetY = [];

for ( b = 0; b < 10; b++ ) {
    canvas[b] = document.getElementById("canvas_" + b),
    context[b]  = canvas[b].getContext("2d"),
    $canvas[b]  = $("#canvas_" + b),
    canvasOffset[b]  = $canvas[b].offset(),
    offsetX[b]  = canvasOffset[b].left,
    offsetY[b]  = canvasOffset[b].top;
}


for ( b = 0; b < 10; b++ ) {

    context[b].strokeStyle = "#FF2A2A";
    context[b].shadowBlur = 20;
    context[b].shadowOffsetX = 5;
    context[b].shadowOffsetY = 5;
    
    context[b].globalAlpha = .250;
    context[b].strokeRect(x, y, w, h);
    context[b].globalAlpha = 1.00;

}

function draw() {
    for ( b = 0; b < 10; b++ ) {
        // clear the canvas
        context[b].clearRect(0, 0, canvas[b].width, canvas[b].height);

        // save the context state
        context[b].save();

        // set/clear the shadow based on isShadowed
        context[b].shadowColor = isShadowed ? '#7FD4FF' : "#FFFFFF";

        // draw the arc shape
        context[b].beginPath();
        context[b].moveTo(x, y);
        context[b].quadraticCurveTo(x + w - 2, y + 2, x + w, y + h);
        context[b].lineTo(x + w - 35, y + h);
        context[b].quadraticCurveTo(x + w - 2 - 35, y + 2 + 35, x, y + 35);
        context[b].lineTo(x, y);
        context[b].fillStyle = "red";
        context[b].fill();
        context[b].stroke();

        // restore the context state
        context[b].restore();
    }
}

// testing: display if mouse is in/out of arc shape
var $status = $("#status");


// listen for mousemove events
$("#canvas_8").mousemove(function (e) {
    handleMouseMove(e);
});

$("#canvas_8").click(function (e) {
   handleMouseMove_2(e);
});


// handle mousemove events
function handleMouseMove(e) {
    console.log("ofir")

    // we alone are using mousemove events
   ...