Question

I’m trying to extend the functionality of some methods of the 2dcontext object, however I can’t get it to work the way I want: I want to override a method, but I want to call the original method from the overridden method like this:

//First get the original context
var ctx = canvas.getContext("2d");

//Create a class which uses ctx as it's prototype
var ExtendedContext = function (){};
ExtendedContext.prototype = ctx;

//And extend a method
ExtendedContext.prototype.fillRect = function(x, y, width, height) {
    //Do some stuff
    this.prototype.fillRect(x, y, width, height); //Doesn't work
    //Do some more stuff
};

How can I call the original fillRect method from inside my own method?

Answer 1

You can store the reference of the original function just like that:

var oldFillRect = ctx.fillRect;

and then call it like

ExtendedContext.prototype.fillRect = function() {
    //Do some stuff
    oldFillRect.apply(this, arguments);
    //Do some more stuff
};

This technique is sometimes called ‘duck punching’ or a ‘function hook’. In this particular instance, you should also be able to use the Object.getPrototypeOf method to get the original function reference. This would look like

ExtendedContext.prototype.fillRect = function() {
    //Do some stuff
    Object.getPrototypeOf(ExtendedContext.prototype).fillRect.apply(this, arguments);
    //Do some more stuff
};

So you don’t even need to store a reference.