Add new contexts to canvas objects

Question

I'm making a library in javascript and I wanted to know if there was some way to add a new type of context to the canvas rather than 2d

var ctx.document.getElementById('canvas').getContext("othercontext");

where I would create a othercontext with all the normal 2d properties, plus some more. Is there any way to do this?

Answer 1

You can't do this exactly, but you can hook the getContext method and return an extended 2D context that has extra properties and methods:

(function() {
    // save the old getContext function
    var oldGetContext = HTMLCanvasElement.prototype.getContext;

    // overwrite getContext with our new function
    HTMLCanvasElement.prototype.getContext = function(name) {
        // if the canvas type requested is "othercontext",
        // augment the 2d canvas before returning it
        if(name === "othercontext") {
            var plainContext = oldGetContext.call(this, "2d");
            return augment2dContext(plainContext);
        } else {
            // get the original result of getContext
            return oldGetContext.apply(this, arguments);
        }
    }

    // add methods to the context object
    function augment2dContext(inputContext) {
        inputContext.drawSmileyFace = function() { /* ... */ };
        inputContext.drawRandomLine = function() { /* ... */ };
        inputContext.eraseStuff = function() { /* ... */ };
        return inputContext;
    }
})();

Thus, a call to someCanvas.getContext("othercontext").drawSmileyFace() will invoke the drawSmileyFace that has been added to the ordinary 2D-context return value of getContext("2d").

However, I'm hesitant to suggest using this pattern in actual deployed code because:

• Your context name may later become natively implemented by browsers, and your overwriting of getContext will prevent that context type from being accessible
• More generally, it's usually bad practice to extend functionality of host objects like DOM elements, since host objects can (but usually don't) throw errors on perfectly ordinary operations like property access