Javascript canvas button builder

Question

I have a question when creating a button builder for Canvas in JS, I can already detect the click in the button area, but I would like to simplify the code with a constructor, to speed up my content creation process, but I have no idea how to do it.

Here’s an example of my code:

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

//construtor de botoes simples.
// eu utilizo um construtor de canvas por isso o parâmetro "canvas".
function Botao(x,y,w,h, canvas){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.render = function(){
   canvas.context.fillRect(this.x,this.y,this.w,this.h);    
 }  
}

// aqui eu detecto o click do usuário.
function click (evt) {

var rectNav = game.canvas.getBoundingClientRect(); //obtêm as coordenadas do mouse na janela do cliente.
var pos = {
    x: evt.clientX - rectNav.left,
    y: evt.clientY - rectNav.top
 }; 

    if(pos.x>bt.x && pos.x<(bt.x+bt.w) && pos.y>bt.y && pos.y<(bt.y+bt.h)) {
    alert("click")};    // verifica se o click foi na area do botao "bt".

};  

My question is: how do I put all this "click" detection code inside my button maker, where I can just call the function, for example, bt.click(codigo para ser executado) within a function that I constantly update without having to create that additional code, and without having to create a eventListener for such.

Grateful!

Answer 1

I don’t see how you can create an Event Handler with the button creation because the canvas doesn’t have elements like SVG. What you have to do is calculate where it was clicked and have an array of buttons that you can check when there is a click.

Something like that:

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) {
  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); // <------------------------ inserir o botão
}

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
  };

  botoes.forEach(function (btn) { // <---------- verificar os botões
    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

<div>Clica-me!</div>
<canvas></canvas>

jsFiddle: http://jsfiddle.net/hd8ermpf/

Edit:

To use different functions on each button can use a callback logic like this:

function Botao(x, y, w, h, callback) {
  this.cb = callback;
  // ... etc

jsFiddle http://jsfiddle.net/hd8ermpf/2/