html5 - How can I override a native JS function ( canvas's drawImage() ) in pure JavaScript? -

I need to execute some code in each call of function drawImage (), which is done on the canvas 2D reference. Game. Canvas = document.getElementById ('canvas'); Game.ctx = game.canvas.getContext ("2D");

Unfortunately, it does not seem as easy as it is.

I tried to do this:

  game.ctx DrawImageOld = game.ctx.drawImage; Game.ctx.drawImage = function (i, x, y, u, v) {console.log ("ok"); Game.ctx.drawImageOld (i, x, y, u, v);} game.ctx.drawImage (myImage, 10, 10); // Logs "OK" twice on FF   
 and this  
  canvas renderingcontext2d Prototopydivelz = canvas renderingcontax2d.prototype dormize; Canvas renderingcontext2d.propertypeadoidimage = function (i, x, y, u, v) {console.log ("ok"); This.drawImageOld (i, x, y, u, v);} game.ctx.drawImage (myImage, 10, 10); // Logs "OK" twice   
 but country image is never executed ...  
 How can I do this? Another method of "detecting" a function call OT?  
 Thank you.   
 
 
 When you call  
  canvas renderingcontext2d Prototype dragonize (i, x, y, u, v);   
 Then inside  old old ,  refer to this  canvas rendering toddex 2d. Prototype , not for actual reference 2D example. Basically, the error is telling you.  
 You can use or explicitly pass with the example:  
  (function () {var orig_drawImage = CanvasRenderingContext2D.prototype.drawImage; canvas renderingcontext 2D.prototeepdriver = function () {console.log ("ok"); orig_drawImage.apply (this, argument);}}} ());   
 Then being said, it is not guaranteed that it will work in all browsers. Host objects, i.e. the objects not covered by the ECMAScript specification, do not always have to follow all the rules. Some browsers may also define  drawImage  as read-only.