JSFiddle - React, Tailwind, and code Playground

by Emre Erkan

HTML

<div id="playgarden">
    <div id="info"></div>
</div>

JavaScript

var UNIT = 5, WIDTH = 810,
    c = document.createElement('canvas'),
    $c = $(c);

HEIGHT = Math.floor(275000 * UNIT * UNIT / WIDTH);
HEIGHT = Math.floor(HEIGHT / UNIT) * UNIT;

c.width = WIDTH;
c.height = HEIGHT;

$('#playgarden').prepend($c);

var ctx = c.getContext("2d"),
    pattern = document.createElement('canvas'),
    pctx, fillPattern;

pattern.width = UNIT * 2;
pattern.height = UNIT * 2;
pctx = pattern.getContext('2d');
pctx.fillStyle = "#ffffff";
pctx.fillRect(0, 0, UNIT * 2, UNIT * 2);
pctx.fillStyle="#dfdfdf";
pctx.fillRect(UNIT, 0, UNIT, UNIT);
pctx.fillRect(0, UNIT, UNIT, UNIT);
fillPattern = ctx.createPattern(pattern, "repeat");
ctx.rect(0, 0, WIDTH, HEIGHT);
ctx.fillStyle = fillPattern;
ctx.fill();

$c
    .on('mousemove', function(e) {
        var x = e.pageX - $c.offset().left , y = e.pageY - $c.offset().top,
        box = Math.floor(y / UNIT) * (WIDTH / UNIT) + Math.ceil(x / UNIT);
        $('#info').html("UNIT: " + UNIT + ", x: " + x + ", y: " + y + ", box: " + box);
        $c.data('box', box);
    })
    .on('click', function(e) {
        var box = $c.data('box'), row = Math.ceil(box * UNIT / WIDTH), col = box - ((row - 1) * (WIDTH / UNIT));
        $('#info').html("row: " + row + ", col: " + col + ", box: " + box);
        ctx.fillStyle = "#ff0000";
        ctx.fillRect((col - 1) * UNIT, (row - 1) * UNIT, UNIT, UNIT);
    })
;
var data = [];
for(var i = 0; i < WIDTH; i = i + UNIT) {
    for(var y = 0; y < HEIGHT; y = y + UNIT) {
        data.push( Math.round( Math.random() )); 
    }
}
for(var i = 0, il = data.length; i < il ; i++) {
    if(data[i]) {
        var row = Math.ceil(i * UNIT / WIDTH), col = i - ((row - 1) * (WIDTH / UNIT));
        ctx.fillStyle = "#ff0000";
        ctx.fillRect((col - 1) * UNIT, (row - 1) * UNIT, UNIT, UNIT);
    }
}