Altering the way functions are called in a specific class in javascript

Question 1

You could mixin the properties you want to add on the context.

var canvas = document.getElementById('testcanvas');

var ExtendedCtx = function(canvas) {
    var ctx = canvas.getContext('2d');
    ctx.newProp = 20;
    ctx.newMethod = function(){
        return this.newProp/2;
    }
    return ctx;
}

var pad = ExtendedCtx(canvas);

pad.fillRect(0, 0, 40, 40);
console.log(pad.newProp, pad.newMethod(), pad.canvas); // 20, 10, canvas element

Question 2

So what you're trying to do is create an object whose prototype is a 2d canvas context.

First, although it won't work, here's the correct way to do that in a general-purpose web page (e.g., one that can't rely on ES5 yet, because of IE8):

function getExtendedContext(canvas) {
    var ectx;

    // A one-off constructor function
    function ctor() { }

    // Set the object that will be assigned as a prototype
    // when using that ctor
    ctor.prototype = canvas.getContext("2d");

    // Create our object
    ectx = new ctor();

    // Add properties to it
    ectx.nonBuiltinFunction = function() { /* ... */ };

    // Return it
    return ectx;
}

// Usage
var ctx = getExtendedContext(document.getElementById("special"));
ctx.nonBuiltinFunction();
ctx.fillRect(0, 0, 40, 40);

[With ES5, we could use Object.create, but it can't be correctly shimmed on older browsers (and I strongly recommend not half-shimming it).]

Live Example | Live Source (but again, it doesn't work)

The problem is that the canvas object and its context objects are DOM objects, not JavaScript objects. DOM objects are what the ECMAScript specification calls "host" objects, and they are not required to act like JavaScript objects. The ECMAScript specification has various notes in it about this (and similarly for host-provided functions, like alert).

At least on Chrome, the 2d context object refuses to participate in JavaScript inheritance. When we call ctx.fillRect(0, 0, 40, 40); above, we get the exception that you mentioned in your question:

Uncaught TypeError: Illegal invocation

The reason is that fillRect checks to see if this (within the call) is a 2d context object, and it isn't — it's the object we created, which has the context as its prototype. So fillRect throws a TypeError, because this isn't a context.

This is unfortunate, because it makes doing what you're trying to do much harder. To create a true facade for a canvas element, or even just for a 2d context, would require creating a huge amount of code: You'd have to create an object that has all of the methods of a 2d context, and when those methods are called, it calls them on the real 2d context it wraps. Worse, because 2d contexts have writable properties, if you can't count on an ES5 environment, you'd have to set all of those properties on the underlying context before making any calls to it. Truly ugly.

So since we can't use inheritance, and using a facade would be really ugly, we need to look at extension: Actually extending the 2d context object itself, rather than using it as a prototype or wrapping it in a facade.

Chrome, at least, tolerates your adding properties to the 2d context object, so you can do this:

function getExtendedContext(canvas) {
    var ectx;

    ectx = canvas.getContext("2d");
    ectx.nonBuiltinFunction = function() { /* ... */ };

    return ectx;
}

Live Example | Live Source

Whether that will work on other browsers is something you'd have to test, because each host is free to do what it wants, including "sealing" host objects.

In your examples, you seemed to want to override the getContext on the HTMLCanvasElement object itself. Chrome allows you to do that:

function extendCanvas(canvas) {
    var realGetContext;

    // Save a reference to the real `getContext` function        
    realGetContext = canvas.getContext;

    // Replace it with our own
    canvas.getContext = function(type) {
        // Call the real one
        var ctx = realGetContext.apply(this, arguments);

        // If the request was for a 2d canvas, extend it
        if (type === "2d") {
            extend2dContext(ctx);
        }

        // Return it
        return ctx;
    };

    return canvas;
}

function extend2dContext(ctx) {
    ctx.nonBuiltinFunction = function() {
        this.fillStyle = "blue";
        this.fillRect(41, 41, 30, 30);
    };

    return ctx;
}

// Usage
var canvas = extendCanvas(document.getElementById("someCanvas"));
var ctx = canvas.getContext("2d");
ctx.nonBuiltinFunction();

Live Example | Live Source

...but whether other browsers will is, again, something that you'd have to test. If you run into an environment where you can't extend the objects like this, your choices are doing a full facade (which will be really ugly) or falling back on procedural programming (functions you pass the canvas into).