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.

Intima

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.

Hemmer

Answer 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

Argillite

Answer 3

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

Jumbuck

Might have once worked but doesn't work now for me in Firefox. Event handler never fires. – Chinook

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.

Topknot

Answer 5

No event handler exists so here's what I do:

My image manipulating program (not a paint package) uses two canvases;

One for manipulation and the other for the undo function...

<canvas id="C"></canvas>

<canvas id="U"></canvas>

So it's easy to compare them for change whenever needed.

To query if they're the same:

let Same = C.toDataURL()===U.toDataURL();

Or return the reverse state... find out if they've changed:

let Changed = C.toDataURL()!==U.toDataURL();

I hope this helps.

Slover