HTML Canvas getContext代理重复触发问题：如何绕过代理获取上下文？

这个问题我太熟悉了——当你用代理覆盖了HTMLCanvasElement.prototype.getContext后，每次调用这个方法都会触发代理逻辑，导致上下文的方法（比如arc）被重复修改，最终出现缩放叠加的问题。要解决这个问题，核心是拿到未被篡改的原始getContext方法，下面给你两种靠谱的方案：

方案1：提前保存原始方法（推荐，适用于自己编写的代理脚本） #

既然是你自己安装的代理，那最简单的方式就是在覆盖原型方法之前，先把原始的getContext存起来。这样后续需要的时候直接调用保存的版本就行：

// 第一步：在安装代理前，先保存原始的getContext方法
const originalGetContext = unsafeWindow.HTMLCanvasElement.prototype.getContext;

// 第二步：安装你的代理逻辑（和你原来的代码一致）
const proxy = new Proxy(originalGetContext, {
  apply(target, thisArg, args) {
    const ctx = Reflect.apply(...arguments);
    const prototype = Object.getPrototypeOf(ctx);
    const descriptors = Object.getOwnPropertyDescriptors(prototype);
    Object.defineProperties(prototype, {
      arc: {
        value(x, y, radius, startAngle, endAngle) {
          const { a, b, c, d, e, f } = ctx.getTransform();
          const scale = 2;
          ctx.setTransform(a * scale, b, c, d * scale, e, f);
          return descriptors.arc.value.call(this, ...arguments);
        }
      },
    });
    return ctx;
  }
});
unsafeWindow.HTMLCanvasElement.prototype.getContext = proxy;

// 第三步：需要获取原始上下文时，直接调用保存的原始方法
const canvas = document.getElementById('canvas');
const originalCtx = originalGetContext.call(canvas, '2d');

这种方法性能好、逻辑清晰，完全在你的控制范围内，是最优解。

方案2：从干净的iframe环境获取原始方法（适用于无法提前保存的场景） #

如果是第三方脚本安装的代理，或者你没办法提前保存原始方法，那可以利用iframe的独立环境特性——iframe里的HTMLCanvasElement原型是未被当前页面修改过的。我们可以临时创建一个iframe，拿到里面的原始getContext方法：

function getOriginalCanvasGetContext() {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
  // 从iframe的干净环境中获取原始方法
  const originalMethod = iframe.contentWindow.HTMLCanvasElement.prototype.getContext;
  document.body.removeChild(iframe);
  return originalMethod;
}

// 使用示例
const canvas = document.getElementById('canvas');
const originalCtx = getOriginalCanvasGetContext().call(canvas, '2d');

这个方法的原理是，iframe的执行环境和主页面完全隔离，里面的DOM API都是浏览器默认的原始版本，不会受到主页面原型修改的影响。

为什么你原来的代码会出现重复缩放？ #

因为每次调用getContext都会触发你的代理，而代理里会重新修改ctx.arc的实现。即使同一个画布多次调用getContext('2d')会返回同一个上下文实例，你的代码也会反复覆盖arc方法，导致每次调用arc时缩放倍数被叠加。而用上面的方法拿到原始上下文后，arc方法就是浏览器默认的实现，不会被你的代理逻辑修改。

内容的提问来源于stack exchange，提问作者Luc