Por ejemplo, quería crear una versión personalizada de CanvasRenderingContext2D.lineTo() . Lo primero que hice fue:
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(); Y funcionó. Pero preferiría, si es posible, reemplazar el método lineTo en lugar de agregar myLineTo . El problema es que necesito el primero para crear el segundo.
Desafortunadamente, esto:
ctx.lineTo = function(x, y) { this.lineTo(x + 50, y + 50); } genera InternalError: too much recursion . ¿Hay alguna forma de copiar el método lineTo y evitar esta repetición infinita?
La respuesta es sí, así es como:
ctxLineTo = ctx.lineTo; ctx.lineTo = function(x, y) { ctxLineTo.call(this, x + 50, y + 50); } (Tenga cuidado de no utilizar una función de flecha o, de lo contrario, this referirá al objeto Ventana).