JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<script>

var ctx;
var nScale = 1.00;
var originalScale = 1.00;

function pageLoad() {
    ctx=document.getElementById('cnvUni').getContext('2d');

    // canvas on page load is 500x500
    drawGrid(); // 5 boxes across & 5 down
    
    zoom(0.5);  // canvas should be now zoomed out to 1000x1000
    drawGrid(); // 10 boxes across & 10 down
    
    zoom(0.5);  // effective zoom is now 0.25 = 2000x2000
    drawGrid(); // should be 20 boxes across & 20 down

    // NOTE: At this point, the grid is drawing boxes @ 20x20 but only using 1/4 of the 
    // canvas size.
}

function zoom(nZoomLevel) {
    nScale = nZoomLevel * nScale
    ctx.scale(nZoomLevel, nZoomLevel);
}

function drawGrid() {
    var nWidth, nHeight;
    nWidth = Math.floor(ctx.canvas.width / nScale);
    nHeight = Math.floor(ctx.canvas.height / nScale);   

    var nGridSize = 100;
    var nGridY = 0;
    var nGridX = 0;

    // sets a random colour each time grid is drawn.
    ctx.strokeStyle = 'hsl(' + Math.floor(Math.random()*240) + ',100%,30%)';

    ctx.beginPath();
    for (nGridY=0;nGridY < nHeight; nGridY += nGridSize) {

        for (nGridX=0;nGridX < nWidth; nGridX += nGridSize) {
        // draw the box;
            ctx.strokeRect(nGridX, nGridY, nGridSize, nGridSize);
        }
    }
    ctx.closePath();
}

</script>
</head>
<body onload="pageLoad();">
<canvas id="cnvUni" width="500" height="500">
Canvas doesn't work.
</canvas>
</body>
</html>