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.

Solution 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.

Solution 2

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