Как написать программу на js, которая будет менять фон ячейки в сетке при нажатии на неё мышкой?

Question

[imdgssx]

Вот такая сетка.

Прикрепляю код.

const canvas = document.getElementById("canvas");
	    const ctx = canvas.getContext("2d");
       
        ctx.beginPath();
        for (let i = 0; i < 10; i++) {
            ctx.moveTo(100, 100 + i*20);
            ctx.lineTo(300, 100 + i*20);
        } 
        for (let j = 0; j < 11; j++) {
            ctx.moveTo(100 + j*20, 100);
            ctx.lineTo(100 + j*20, 280);
        }
        ctx.stroke();

Comments

[Wispik]

1. Обработать событие click по канвасу
2. Высчитать по координатам, по какой ячейке кликнули
3. Закрасить эту ячейку (нарисовать квадратик поверх сетки)

[GeminiX]

Почему именно canvas?

[Rerurk]

Александр, такая ж мысль возникла

[imdgssx]

Александр, программа колледжа, вот разбираюсь

Answer 1

[twobomb]

canvas.onclick = function (ev) {
    ctx.fillStyle = "#FF0000AA";
    if (
      ev.offsetX >= 100 &&
      ev.offsetX <= 300 &&
      ev.offsetY >= 100 &&
      ev.offsetY <= 280
    )
      ctx.fillRect(
        Math.floor(ev.offsetX / 20) * 20,
        Math.floor(ev.offsetY / 20) * 20,
        20,
        20
      );
  };

Answer 2

[historydev]