JSFiddle - React, Tailwind, and code Playground

by dobbylan

HTML

<div id="wrapper">
        <div id="topdiv">
            <canvas id="topcanvas" width="400" height="100"></canvas>
        </div>
        <div id="maindiv">
            <canvas id="maincanvas"  width="400" height="400"></canvas>
        </div>
    </div>

CSS

#wrapper {
    position: relative;
border: solid 2px #000000;
    width: 400px;
    height: 500px
}

#topdiv {
border-style: none;
    position: relative;
    width: 400px;
    height: 100px;
}

#maindiv {
border-style: none;
    width: 400px;
    height: 400px;
}

JavaScript

/* Global Variables ################ */
var mainCanvas = document.getElementById("maincanvas");
var topcanvas = document.getElementById("topcanvas");

var rows = 30;
var columns = 20;
var cellsizexy = 30;
var toplegendheight = 100;

var nodeColor = '#98C0E3';
var legendBgColor = '#B0B0B0';
var gridLineColor = '#d9d7d7';
var textColor = '#000000';
/* Global Variables ################ */

/**
Draw pinned first column (Background and Legend)
*/
function drawFirstColumn() {
    var topcanvasctx = topcanvas.getContext("2d");
    topcanvasctx.clearRect(0, 0, topcanvas.width, topcanvas.height);
    
    topcanvasctx.save();
    topcanvasctx.fillStyle = legendBgColor;

    // draw gray boxes for first column
    for ( var i = 0; i < columns; i++) {
        topcanvasctx.fillRect(i * (cellsizexy), 0, cellsizexy, toplegendheight);
    }
    topcanvasctx.restore();

    // draw legend text
    topcanvasctx.save();
    topcanvasctx.fillStyle = textColor;
    topcanvasctx.rotate(-Math.PI / 2);
    topcanvasctx.textAlign = "right";
    topcanvasctx.font = 'bold 14px sans-serif';
    topcanvasctx.textBaseline = 'top';
    for ( var i = 0; i < columns; i++) {
        topcanvasctx.fillText("Col. "+i, 0, i * (cellsizexy) + 10,
                toplegendheight);
    }
    topcanvasctx.restore();

    // draw grid lines
    topcanvasctx.save();
    for ( var i = 0; i <= columns; i++) {
        topcanvasctx.beginPath();
        topcanvasctx.strokeStyle = gridLineColor;
        topcanvasctx.lineWidth = 1;
        topcanvasctx.moveTo(i * cellsizexy + 0.5, 0); // Add 0.5 fix canvas bug to avoid blur
        topcanvasctx.lineTo(i * cellsizexy + 0.5, columns * cellsizexy);
        topcanvasctx.stroke();
    }
    topcanvasctx.restore();

}

/**
Draw Matrix (Grid and fill cells)
*/
function drawMatrix() {
    var ctx = mainCanvas.getContext('2d');
    // clear mainCanvas
    ctx.clearRect(0, 0, mainCanvas.width, mainCanvas.height);

    // draw grid
    ctx.save();
    for ( var i = 0; i <=...