idea: making it a drop-in <canvas> replacement.

[trusktr]

I love how web is becoming so composable out of the box with custom elements!

It would be sweet to be able to use <recordable-canvas> anywhere that <canvas> is usable, as a drop-in.

With Lume 3D elements I could add this possibility to the <lume-scene> element:

<lume-scene webgl>
  <!-- Pass in a <recordable-canvas>, Lume won't even know it isn't a regular <canvas>, and it renders as usual. -->
  <recordable-canvas id="canvas" slot="canvas"></recordable-canvas>

  <!-- ... 3D elements as usual ... -->
</lume-scene>

Then a Lume user who provides a custom canvas would be able to record the canvas, independently of Lume's features, using recordable-canvas's simple API, and without having to dig into the scene's ShadowRoot to get the default canvas.

I think the best way to do this would be to use customized built-ins, but Safari doesn't support it.

The next best way, in lieu of Safari support, would be to make the class proxy all the methods/properties to the underlying <canvas>. But then things like el instanceof HTMLCanvasElement might not work out of the box (maybe a Symbol.hasInstance method will do the trick)

[bengfarrell]

Thanks! Lume looks great, looks a lot like what a-frame was going for, but I don't think that's in development anymore.

So in regards to being a drop-in replacement, that's what I went for. I didn't spend all that much time thinking about, but just went to MDN to refresh my memory on all the methods, properties, and attributes. And there are surprisingly few. Most of what you want to do is get the context (which of course has a huge API), but I proxy the same getContext method in recordable-canvas.

Anyway glad you dig!