JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="builder-canvas" height="400px" width="800px;"></canvas>

JavaScript

var build_canvas = document.getElementById("builder-canvas");
var build_context = build_canvas.getContext("2d");
var builder = function () {

    var x;
    for (x = 0.5; x <= 800; x += 15) {
        build_context.moveTo(x, 0);
        build_context.lineTo(x, 390);
    }

    var y;
    for (y = 0.5; y < 400; y += 10) {
        build_context.moveTo(0, y);
        build_context.lineTo(796, y);
    }

    build_context.strokeStyle = "#000000";
    build_context.stroke();
};
builder();

build_context.fillStyle = 'red';
build_canvas.onclick = function(e) {
    var rect = build_canvas.getBoundingClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top;
    
    x = ((x / 15)|0) * 15;
    y = ((y / 10)|0) * 10;
    
    build_context.fillRect(x+1, y+1, 14, 9);
}