JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="450" height="450"></canvas>

JavaScript

$(document).ready(function(){
                //Canvas stuff
                var canvas = $("#canvas")[0];
                var ctx = canvas.getContext("2d");
                var w = $("#canvas").width();
                var h = $("#canvas").height();
                canvas.style.left = "0px";
                canvas.style.top = "0px";
                canvas.style.position = "absolute";
                
                
                //Lets paint the canvas now
                ctx.fillStyle = "white";
                ctx.fillRect(0, 0, w, h);
                ctx.strokeStyle = "black";
                ctx.strokeRect(0, 0, w, h);
                
                // Set all Rectangles, Draw
                var rects = [
                 {x:0,y:0,width:150,height:150},
                {x:150,y:0,width:150,height:150},
                 {x:300,y:0,width:150,height:150},
                 {x:0,y:150,width:150,height:150},
                 {x:150,y:150,width:150,height:150},
                 {x:300,y:150,width:150,height:150},
                {x:0,y:300,width:150,height:150},
                 {x:150,y:300,width:150,height:150},
                 {x:300,y:300,width:150,height:150}
                 ];
                
                for (i = 0; 1<9; i++) {
                    ctx.rect(rects[i].x, rects[i].y, 150, 150);
                    ctx.stroke();
                }
    
    
                //Functions 
              
                
                $("#canvas").click(function(){
                    // What box is clicked
                })
                
                
            })