views:

606

answers:

1

As the title says, I need a notification when the content of a canvas element was redrawn. Is this possible?

If not, a notification when the whole page was redrawn would also be ok (reDRAWN not reLOADED!).

The reason why I need this is that I want to get the current FPS of an animation running inside a canvas.

+1  A: 

Canvas itself has no "redraw" method or event. The architecture is such that at any time, any function can draw in the context. However, a possible solution would be to "override" specific functions which mark the drawing of a new frame. Specifcially, I am thinking that overridding context.clearRect would be the way to go.

var context=canvas.getContext('2d');
context._clearRect=context.clearRect;
context.clearRect=function(x,y,w,h){
    context._clearRect(x,y,w,h);
    //do your stuff here
};

The only issue with this method is that it assumes that clearRect is called exactly once every frame. However, as long as this is the case, then the above code will work.

Maz
Then I have a problem.I am pretty sure, that I am drawing more than I rectangle per frame :-(I tested that by using your above method, which resulted in a insanely high framerate of sth. like 80000+ FPS.Using the MozAfterPaint-event from Firefox, I was able to get the real framerate, which was somewhere between 9 and 10 FPS: https://developer.mozilla.org/en/Gecko-Specific_DOM_Events#MozAfterPaintDoes anyone know if an event similar to MozAfterPaint exists in other browsers like Webkit?Or maybe someone has a good idea to solve my problem?