¿El elemento canvas tiene un evento de “cambio”?

¿Hay alguna forma de asociar el controlador de eventos al cambio de un elemento canvas ? Necesito activar una función cada vez que algo atraiga algo sobre ella.

No, el elemento canvas no proporciona ningún evento, es solo un bitmap simple.

Si realmente quiere hacer esto, secuestrar todas las llamadas en un context integrado en sus eventos y luego llamar a la función original (que ha copiado previamente).

Mi consejo:
No hagas lo anterior, será lento y difícil de mantener. En lugar de cambiar el diseño de su aplicación, podría, por ejemplo, realizar funciones de dibujo personalizadas que abstraigan el canvas y coloquen allí el material del evento.

Esto también tendría el beneficio adicional de menos llamadas al context.* (Por lo tanto, un código más limpio) al hacer un montón de dibujo.

Podría usar el evento mouseup .

Usé jquery para hacer esto

 $('canvas').on('mouseup', function() { // Fire function! }); 

En realidad, envolvería el canvas si fuera necesario para rastrear estos comandos. Aquí hay un ejemplo simple de seguimiento solo para algunos métodos:

 function eventOnDraw( ctx, eventName ){ var fireEvent = function(){ var evt = document.createEvent("Events"); evt.initEvent(eventName, true, true); ctx.canvas.dispatchEvent( evt ); } var stroke = ctx.stroke; ctx.stroke = function(){ stroke.call(this); fireEvent(); }; var fillRect = ctx.fillRect; ctx.fillRect = function(x,y,w,h){ fillRect.call(this,x,y,w,h); fireEvent(); }; var fill = ctx.fill; ctx.fill = function(){ fill.call(this); fireEvent(); }; } ... var myContext = someCanvasElement.getContext('2d'); someCanvasElement.addEventListener( 'blargle', myHandler, false ); eventOnDraw( myContext, 'blargle' ); 

Para mí, adjunté un evento de clic en el canvas y puedo detectar si se dibuja algo en ese canvas.

Fiddle aquí – http://jsfiddle.net/ashwyn/egXhT/2/

Verifique el texto //Event if Drawn y comprenderá dónde.