JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>

JavaScript

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

//construtor de botoes simples.
// eu utilizo um construtor de canvas por isso o parâmetro "canvas".
var botoes = [];

function Botao(x, y, w, h, canvas) {
  this.x = x;
  this.y = y;
  this.w = w;
  this.h = h;
  this.render = function (color) {
    ctx.fillStyle = this.color = color || '#000';
    ctx.fillRect(this.x, this.y, this.w, this.h);
  }
  botoes.push(this);
}

function onTarget(pos, bt) {
  return pos.x > bt.x && pos.x < (bt.x + bt.w) && pos.y > bt.y && pos.y < (bt.y + bt.h);
}

// aqui eu detecto o click do usuário.
function click(evt) {
  var rectNav = canvas.getBoundingClientRect(); //obtêm as coordenadas do mouse na janela do cliente.
  var pos = {
    x: evt.clientX - rectNav.left,
    y: evt.clientY - rectNav.top
  };
  console.log(botoes)
  botoes.forEach(function (btn) {
    console.log(pos, btn, botoes)
    var clicado = onTarget(pos, btn);
    if (clicado) btn.render(btn.color == '#000' ? '#ccf' : '#000');
  })
};

canvas.addEventListener('click', click);

var bt = new Botao(0, 0, 100, 50).render(); // cria o botao
var bt = new Botao(30, 30, 100, 50).render(); // cria o botao