JSFiddle - React, Tailwind, and code Playground

by avall

HTML

<canvas id="myCanvas" width="400" height="400"></canvas>
<div id="x">x</div>
<div id="y">y</div>

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var radius = 4;

for (x=radius; x<canvas.width-radius; x+=50) {
	for (y=radius; y<canvas.height-radius; y+=50) {
		context.beginPath();
		context.arc(x, y, radius, 0, 2 * Math.PI, false);
		context.stroke();
	}
}
$('canvas').click(canvasClicked);

function canvasClicked(e) {
    var x = e.pageX - $(this).offset().left - radius;
    var y = e.pageY - $(this).offset().top - radius;
    
    var newX = Math.round(x/50)*50 + radius;
    var newY = Math.round(y/50)*50 + radius;
    x = newX;
    y = newY;
    
	context.beginPath();
	context.arc(x, y, radius, 0, 2 * Math.PI, false);
    context.fillStyle = 'black';
    context.fill();
    context.lineWidth = 1;
    context.strokeStyle = '#000000';
    context.stroke();
};