Fix light button margins, make it so grids only show for the actual colorable cells, making it look much better

This commit is contained in:
csd4ni3l
2025-10-24 15:00:19 +02:00
parent ba0bb70f2b
commit ed274a24e4
4 changed files with 27 additions and 8 deletions

View File

@@ -17,17 +17,36 @@ function clearCanvas(ctx, canvas, img, GRID_SIZE, currentPattern) {
function drawGrid(ctx, canvas, GRID_SIZE) {
const cell_size = canvas.width / GRID_SIZE;
const image_data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
ctx.strokeStyle = 'rgba(0, 0, 0, 0.6)';
ctx.lineWidth = 1;
for (let i = 0; i <= GRID_SIZE; i++) {
const pos = i * cell_size;
ctx.beginPath();
ctx.moveTo(pos, 0);
ctx.lineTo(pos, canvas.height);
for (let j = 0; j < GRID_SIZE; j++) {
const checkLeft = i > 0 && check_colorable(image_data, canvas.width, cell_size, i - 1, j);
const checkRight = i < GRID_SIZE && check_colorable(image_data, canvas.width, cell_size, i, j);
if (checkLeft || checkRight) {
ctx.moveTo(pos, j * cell_size);
ctx.lineTo(pos, (j + 1) * cell_size);
}
}
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, pos);
ctx.lineTo(canvas.width, pos);
for (let j = 0; j < GRID_SIZE; j++) {
const checkAbove = i > 0 && check_colorable(image_data, canvas.width, cell_size, j, i - 1);
const checkBelow = i < GRID_SIZE && check_colorable(image_data, canvas.width, cell_size, j, i);
if (checkAbove || checkBelow) {
ctx.moveTo(j * cell_size, pos);
ctx.lineTo((j + 1) * cell_size, pos);
}
}
ctx.stroke();
}
}