How to apply an event to an array of canvas objects?

Question

How to apply an event to an array of canvas objects?

Navigation

#1 by (-1 votes)

1

I have to make a diagram in HTML5 canvas and for them I make arrangements of rectangles with strokeRect. However, these elements must have events and detect when they are clicked and change color, can someone give me a clue on how I can apply an onmouseclic event on a complete array of canvas elements?

I appreciate the attention.

javascript html5 canvas

asked by Alexis Katelaars 07.07.2017 в 19:33

source

1 answer

ImageView button in Fragment does not work Passing data from a broadcastreceiver to an activity

score -1 · Answer 1

Maybe this snippet can give you a guide.

window.onload = function(){

	var rect = document.getElementById('rect');
	var ctx  = rect.getContext('2d');
        ctx.fillStyle="#FF0000";
        ctx.fillRect(20,20,150,150);
  
        // Agregar evento al canvas
	rect.addEventListener('mousedown',onDown,false);
        
        // Evento a lanzar en 'mousedown'
	function onDown(event){
		cx = event.pageX;
		cy = event.pageY;
		alert("X,Y="+cx+','+cy);
	}

}

<canvas id="rect" height="170" width="170">