Question

We can modify a DOM element and add to its prototype. For example, if we want to add something only to the canvas, we’d do something like this:

HTMLCanvasElement.prototype.doSomething = function(arg) { ... };

We can then perform this action on a canvas element:

var canvas = document.getElementById('canvasId');
canvas.doSomething(...);

Is it possible to add/attach a function to this instance of the canvas without modifying the prototype of HTMLCanvasElement. I only want a canvas where doSomething(…) was called to have access to the additional methods, not all canvas elements in the DOM. How can I do this?

I’ve tried the following in my doSomething function:

this.prototype.foobar = function() {...}

However, prototype is undefined here.

Answer 1

Shusl helped me come up with the correct answer. It was easier than I thought. In my doSomething(args) function, instead of trying to modify the object prototype, I just directly attached the function. Here’s the full source code:

HTMLCanvasElement.prototype.doSomething = function(args) {
    this.foobar = function(args) { ... };
}

var canvas = document.getElementById('canvasId');
canvas.doSomething(...);
canvas.foobar(...);

Now, foobar is only accessible to the instance of the canvas where doSomething was called. At the same time, I don’t have to have any information about the instance.