I’ve just ran into a surprising issue: I wanted to overwrite the HTML canvas getContext method (SO question). It turns out that this doesn’t work:
const _getContext = HTMLCanvasElement.prototype.getContext;
HTMLCanvasElement.prototype.getContext = (type, options) => {
console.log(this, arguments);
// this is the window
// arguments is something like [require(id), Object, Module, "/client/modules/MyModule.jsx", "/client/whereTheModuleWasImportedFrom", callee: (require,exports), length: 5
...
return _getContext.apply(this, arguments);
};
but this works (note that I’m using the syntax function instead of () =>):
const _getContext = HTMLCanvasElement.prototype.getContext;
HTMLCanvasElement.prototype.getContext = function(type, options) {
console.log(this, arguments);
// this is the canvas DOM element the function is called from
// arguments is [type, option], as excepted
...
return _getContext.apply(this, arguments);
};
And with a given DOM Canvas element canvas, both this:
const _getContext = canvas.getContext.bind(canvas);
canvas.getContext = (type, options) => {
...
return _getContext(type, options);
};
and this:
const _getContext = canvas.getContext.bind(canvas);
canvas.getContext = function(type, options) {
...
return _getContext(type, options);
};
work.
So:
- Am I doing something wrong with the syntax?
- Is it a bug? And if so:
a) is it Meteor related?
b) Should I look more into Babel stuff?