title: Is it possible to use Proxy with native browser objects (HTMLElement, Canvas2DRenderingContext ,...)?
body: <p>What I was trying to accomplish. I wanted to share a single canvas (because what I'm doing is very heavy) and so I thought I'd make a limited resource manager. You'd ask it for the resource via promise, in this case a <code>Canvas2DRenderingContext</code>. It would wrap the context in a revokable proxy. When you're finished you are required to call release which both returns the canvas to the limited resource manager so it can give it to someone else AND it revokes the proxy so the user can't accidentally use the resource again.</p>
  
  <p>Except when I make a proxy of a <code>Canvas2DRenderingContext</code> it fails.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const ctx = document.createElement('canvas').getContext('2d');
  const proxy = new Proxy(ctx, {});
  
  // try to change the width of the canvas via the proxy
  test(() =&gt; { proxy.canvas.width = 100; });  // ERROR
  
  // try to translate the origin of via the proxy
  test(() =&gt; { proxy.translate(1, 2); });     // ERROR
  
  
  function test(fn) {
    try {
      fn();
    } catch (e) {
      console.log("FAILED:", e, fn);
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The code above generates <code>Uncaught TypeError: Illegal invocation</code> in Chrome and <code>TypeError: 'get canvas' called on an object that does not implement interface CanvasRenderingContext2D.</code> in Firefox</p>
  
  <p>Is that an expected limitation of Proxy or is it a bug?</p>
  
  <p>note: of course there are other solutions. I can remove the proxy and just not worry about it. I can also wrap the canvas in some JavaScript object that just exposes the functions I need and proxy that. I'm just more curious if this is supposed to work or not. <a href="https://hacks.mozilla.org/2015/07/es6-in-depth-proxies-and-reflect/" rel="noreferrer">This Mozilla blog post kind of indirectly suggests it's supposed to be possbile</a> since it actually mentions using a proxy with an <code>HTMLElement</code> if only to point out it would certainly fail if you called <code>someElement.appendChild(proxiedElement)</code> but given the simple code above I'd expect it's actually not possible to meanfully wrap any DOM elements or other native objects.</p>
  
  <p>Below is proof that Proxies work with plain JS objects. They work with class based (as in the functions are on the prototype chain). And they don't work with native objects.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const img = document.createElement('img')
  const proxy = new Proxy(img, {});
  console.log(proxy.src);</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also fails with the same error. where as they don't with JavaScript objects</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function testNoOpProxy(obj, msg) {
    log(msg, '------');
    const proxy = new Proxy(obj, {});
    check("get property:", () =&gt; proxy.width);
    check("set property:", () =&gt; proxy.width = 456);
    check("get property:", () =&gt; proxy.width);
    check("call fn on object:", () =&gt; proxy.getContext('2d'));
  }
  
  function check(msg, fn) {
    let success = true;
    let r;
    try {
      r = fn();
    } catch (e) {
      success = false;
    }
    log('   ', success ? "pass" : "FAIL", msg, r, fn);
  }
  
  
  const test = {
    width: 123,
    getContext: function() {
      return "test";
    },
  };
  
  class Test {
    constructor() {
      this.width = 123;
    }
    getContext() {
      return `Test width = ${this.width}`;
    }
  }
  
  const testInst = new Test();
  const canvas = document.createElement('canvas');
  
  testNoOpProxy(test, 'plain object');
  testNoOpProxy(testInst, 'class object');
  testNoOpProxy(canvas, 'native object');
  
  
  
  function log(...args) {
    const elem = document.createElement('pre');
    elem.textContent = [...args].join(' ');
    document.body.appendChild(elem);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>pre { margin: 0; }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Well FWIW the solution I choose was to wrap the canvas in a small class that does the thing I was using it for. Advantage is it's easier to test (since I can pass in a mock) and I can proxy that object no problem. Still, I'd like to know </p>
  
  <ol>
  <li>Why doesn't Proxy work for native object?</li>
  <li>Do any of the reasons Proxy doesn't work with native objects apply to situations with JavaScript objects?</li>
  <li>Is it possible to get Proxy to work with native objects.</li>
  </ol>