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.

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.

• javascript
• events
• html
• canvas
• redraw

1 Answer 1

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.