Does canvas element have “change” event?

Question

Is there a way to attach event handler to a change of a canvas element? I need to fire a function whenever something draws anything on it.

Answer 1

No, the canvas element does not provide any events, it's just a plain bitmap.

If you really want to do this, hijack all the calls on a context built in your events and then call the original function (which you have copied previously).

My advice:
Do not do the above, it will be slow and hard to maintain. Instead change the design of your application, you could, for one, make custom drawing functions which will abstract the canvas and put in the event stuff there.

This would also have the added benefit of less context.* calls (therefore cleaner code) when doing a lot of drawing.

Answer 2

I would actually wrap the canvas iff needed to track these commands. Here's a simple example tracking only for a few methods:

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' );

Answer 3

You could use the mouseup event.

canvasElement.addEventListener('mouseup', e => {
  // Fire function!
});

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

The mouseup docs above actually have a good canvas example

Answer 4

For me I attached a click event on the canvas and I am able to detect if any thing is drawn on that canvas.

Fiddle here - http://jsfiddle.net/ashwyn/egXhT/2/

Check for text //Event if Drawn and you will understand where.