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?

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?

• javascript
• canvas

• You're making me curious! What do you envision in your new framework and how would it differ from the existing 2d/3d implementations? – markE Commented May 20, 2013 at 17:58

4 Answers 4

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 bee 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

While I haven't been able to dig up anything that definitively answers your question, I would tentatively state that it's highly unlikely that you're able to define a new context yet in any implementations of Javascript (and even if you could, browsers probably wouldn't support it for a while). You could, however, modify already existing "2d" contexts with additional properties, perhaps by running them through a constructor?

I'm pretty sure this is impossible. I suggest wrapping it in an object or add methods to the context

The simple answer is no, that's not possible.

Canvas context's are intended to be something browser vendors (Chrome, Firefox, etc) create, not JavaScript/Canvas authors (you and me).

Aside from "2d" and "webgl", The canvas specification states that browser vendors may define their own (experimental) contexts (like "moz-3d"), but again, not JavaScript authors.

Stick with adding new methods to the existing context. (Or making a wrapper, etc)