Does canvas element have “change” event?

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.

Answers:

Answer

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

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

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

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.