How to make canvas elements clickable

Question

I'm trying to make the game MineSweeper and have till now made all the cells i need but i also need the cells to be clickable to remove the cover from them, but it seems like there is no way of doing it.

i have pushed every single object into an Array and tried to loop through it and then addEventListener but it says that cell.addEventListener is not a function same if i try to add an onclick funtion on the cell Array. am i doing something wrong or is it not possible to do it?

const canvas = document.getElementById("myCanvas")
const ctx = canvas.getContext("2d")
canvas.style.border = "1px solid black"

class Cell {
    constructor(x, y, w) {
        this.x = x
        this.y = y
        this.w = w
        let bomb = false
        let revealed = false
    }
    show() {
        ctx.beginPath()
        ctx.rect(this.x, this.y, this.w, this.w)
        ctx.stroke()
    }
}

let w = canvas.width
let h = canvas.height
let ColumnRow = w / 15
let cell = []


function setup() {
    for (let x = 0; x < w - 1; x += ColumnRow) {
        for (let y = 0; y < h - 1; y += ColumnRow) {
            cell.push(new Cell(x, y, ColumnRow))
        }
    }
}

function draw() {
    for (let c of cell) {
        c.show()
    }
}

function update() {
    setup()
    draw()
    requestAnimationFrame(update)
}
update()

user_13478993 · Answer

You should use Path2D constructor to check if the click event is inside a particular canvas Path:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
canvas.style.border = '1px solid black';

class Cell {
  constructor(x, y, w) {
    this.x = x;
    this.y = y;
    this.w = w;
    let bomb = false;
    let revealed = false;
  }
  create() {
    // Create cell
    const cell = new Path2D();
    cell.rect(this.x, this.y, this.w, this.w);
    ctx.stroke(cell);
    this.cell = cell;
  }
}

const w = canvas.width;
const h = canvas.height;
const ColumnRow = w / 15;
const cells = [];

function setup() {
  for (let x = 0; x < w - 1; x += ColumnRow) {
    for (let y = 0; y < h - 1; y += ColumnRow) {
      cells.push(new Cell(x, y, ColumnRow));
    }
  }
}

function draw() {
  for (const cell of cells) {
    cell.create();
  }
}

function addListeners() {
  const handler = function (event) {
    for (const cell of cells) {
      if (ctx.isPointInPath(cell.cell, event.offsetX, event.offsetY)) {
        ctx.strokeStyle = 'green';
        ctx.fillStyle = 'green';
        ctx.fill(cell.cell);
      } else {
        ctx.clearRect(cell.x, cell.y, cell.w, cell.w);
        ctx.strokeStyle = 'red';
      }
    }
  };
  canvas.addEventListener('click', handler);
}

function update() {
  setup();
  draw();
  requestAnimationFrame(update);
}
update();
addListeners();

certain canvas area:

How to make canvas elements clickable

1 Answers