DOM inside canvas

[natew]

I've searched around a bit and it seems like it's at least possible, I tried out putting an SVG inside a Surface but got an error. Have you guys tried this, or have any thoughts on implementing?

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas
http://www.paciellogroup.com/blog/2015/02/html5-canvas-sub-dom/

[mjohnston]

You'll get mixed results with DOM inside canvas. Usually this is used to provide fallback content for user agents that don't support , or for screen readers. Screen readers on mobile do not support this use case very well though. See issue #5.

Surface does not currently support React.DOM.* children.

[natew]

Interesting. My use case would be to enhance performance of some pieces but not all of them. Minor pieces of the UI like icons, buttons, titlebars, etc don't need to be copy/pasteable, but would benefit greatly from canvas, while other areas that are text heavy would be great to still use DOM.

Will probably take me a while but in the future I'd like to look into this more. Let me know if you have any other readings or tips!

[mjohnston]

Certainly - you don't have to use React Canvas for the entire UI. flipboard.com, for instance, uses standard DOM rendering for articles where text selection is more essential.

You can use a <Surface> alongside regular components. A typical use case might be to render a loading spinner on top of the canvas while fetching data:

render: function() {
  <div>
    <Surface />
    <div className='loading' />
  </div>
}