JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
    </head>
    <body bgcolor="#fff">
<canvas class="canvas" id="CV_bkGround" width="1024" height="660" ></canvas>      
<canvas class="canvas" id="CV_slices" width="1024" height="660" ></canvas>
<canvas class="canvas" id="CV_gridSlider" width="1024" height="660" ></canvas>
    </body>
</html>

CSS

body { 
    background-color:#cccccc;
}

JavaScript

//Axis Slice constructor
var globalPosY;
var globalPosX;
var linesX;
var linesY;

    $('.canvas').hide().delay(1000).fadeIn();
    var canvases = $('.canvas').size();
    for (i = 0; i < canvases; i++) {
        $('.canvas:eq(' + i + ')').css('position', 'absolute').css('top', '10px').css('left', '10px').css('z-index', i);
    }

    /* Create background gradient */
    var canvas = document.getElementById('CV_bkGround');
    var context = canvas.getContext('2d');
    var posX = canvas.width / 2;
    var posY = canvas.height / 2;
    context.save();
    context.rect(0, 0, 1000, 650);
    var grd = context.createRadialGradient(posX, posY, 10, posX, posY, 1000);
    grd.addColorStop(0, "#ffffff");
    grd.addColorStop(1, "#373737");
    context.globalAlpha = 0.6;
    context.fillStyle = grd;
    context.fill();
    context.restore();

    /* Create grid x & y lines */
    context.save();
    context.beginPath();
    context.lineWidth = 2;
    context.strokeStyle = "#777777";
    context.moveTo(posX, posY + 250);
    context.lineTo(posX, posY - 250);
    context.moveTo(posX + 250, posY);
    context.lineTo(posX - 250, posY);
    context.stroke();
    context.closePath();
    context.restore();

    events = new Events("CV_gridSlider");
    var canvas = events.getCanvas();
    var context = events.getContext();
    var posX = canvas.width / 2;
    var posY = canvas.height / 2;
    var draggingSliderX = false;
    var draggingSliderY = false;
    var draggingSliderXtouch = false;
    var draggingSliderYtouch = false;
    var s = 0;
    
    function PieChart(canvasId) {
    // user defined properties
    this.canvas = document.getElementById(canvasId);
    // relationships
    this.context = this.canvas.getContext("2d");
    this.pieAreaWidth = this.canvas.width;
    this.pieAreaHeight = this.canvas.height;
    this.pieX = this.pieAreaWidth / 2;
    this.pieY = this.pieAreaHeight / 2;

    // draw slice
    this.drawSlice();
    };

//draws the main slice on the...