For example, I wanted to create a custom version of CanvasRenderingContext2D.lineTo(). The first thing I did was:
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.myLineTo = function(x, y) {
this.lineTo(x + 200, y + 200);
}
ctx.strokeStyle = 'black';
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(50, 50);
ctx.stroke();
ctx.closePath();
and it worked. But I would prefer, if possible, to replace the lineTo method instead of adding myLineTo. The problem is that I need the first to create the second.
Unfortunately, this:
ctx.lineTo = function(x, y) {
this.lineTo(x + 50, y + 50);
}
raises InternalError: too much recursion. Is there a way to copy the lineTo method and prevent this infinite recursion?
The answer is yes, here is how:
ctxLineTo = ctx.lineTo;
ctx.lineTo = function(x, y) {
ctxLineTo.call(this, x + 50, y + 50);
}
(Be careful not to use an arrow function or else this will refer to the Window object.)