How to render tag <canvas> in body HTML Document without wrapper div.

[dhaiduk]

How to render tag in body HTML Document without wrapper div.
I.e. component is rendered as a

tag in which the tag, i.e. how to remove the

and render the tag directly in the body HTML Document.

[drcmda]

you can use the render api https://docs.pmnd.rs/react-three-fiber/api/render-function

in the canvas component the wrapper div is being used for size tracking, as a container for overlays and other things.

[dhaiduk]

Could you show an example?

[drcmda]

https://codesandbox.io/s/v6-adaptive-regression-gf5dn?file=/src/index.js

[dhaiduk]

@drcmda Ok, in the end we have only one canvas tag, but then how to use standard react-dom components on top of the canvas?

[drcmda]

well then you need react-dom. the wrapper div around canvas serves a purpose for some add on functionality, for instance this is where we put down overlays, scroll container stuff etc.

[dhaiduk]

@drcmda I need to have a canvas tag in the body for example root1 this will be the threejs scene and root2 where the html control buttons will be