JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<canvas id="canvas" width="300" height="300"></canvas>
<div id="output">0,0</div>

CSS

#canvas {

}

JavaScript

(function () {
    var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d'),
        offset = $(canvas).offset();
        
    function drawGrid () {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.moveTo(canvas.width*0.33, 0);
        ctx.lineTo(canvas.width*0.33, canvas.height);
        ctx.moveTo(canvas.width*0.66, 0);
        ctx.lineTo(canvas.width*0.66, canvas.height);
        ctx.moveTo(0, canvas.height*0.33);
        ctx.lineTo(canvas.width, canvas.height*0.33);
        ctx.moveTo(0, canvas.height*0.66);
        ctx.lineTo(canvas.width, canvas.height*0.66);
        ctx.stroke();
    }
    
    /*
    $(canvas).bind('mousemove', function (e) {
        $('#output').html( (e.pageX - offset.left) + ',' + (e.pageY - offset.top) );
    });*/
    
    $(canvas).bind('mousemove', function (e) {
        //$('#output').html( (e.pageX - offset.left) + ',' + (e.pageY - offset.top) );

        // Square 0,0
        if (e.pageX <= canvas.width*0.33 && e.pageY <= canvas.height*0.33) {
            
            drawGrid();
            
            ctx.fillRect(0, 0, canvas.width*0.33, canvas.height*0.33);
            
            return;
        }
        
        // Square 0,1
        if (e.pageX <= canvas.width*0.33 && 
            e.pageY > canvas.height*0.33 &&
            e.pageY <= canvas.height*0.66) {
            
            drawGrid();
            
            ctx.fillRect(0, canvas.height*0.33, canvas.width*0.33, canvas.height*0.33);
            
            return;
        }
        
        // Square 0,2
        if (e.pageX <= canvas.width*0.33 && 
            e.pageY > canvas.height*0.66 &&
            e.pageY <= canvas.height) {
            
            drawGrid();
            
            ctx.fillRect(0, canvas.height*0.66, canvas.width*0.33, canvas.height);
            
            return;
        }
        
        
        // Square 1,1
        if (e.pageX > canvas.width*0.33 &&
            e.pageX <...