Hiding Cesium whilst keeping canvas operational

I am experimenting with using the canvas context of Cesium/Resium in another canvas window - it works , but I have some issues with hiding the original Cesium window. I can set the opacity to 0 but interestingly that seems to introduce some performance hit - changing it to 0.2 or similar is fine however, but obviously not satisfactory for what I want as I only want to see one globe.

I have tried display:none but that doesn’t draw the the globe in my second context.

What is the ‘right’ way to achieve this?

Are you taking the output of the first canvas, and redrawing it in a second canvas? If you just need to display the Cesium canvas in a different location in the page, couldn’t you pass the HTML element selector as the first argument when initializing the Cesium viewer, so it’ll create the canvas in the right place?

For various nuanced reasons that won’t work. I need to be able to show and hide the original Cesium canvas, whilst passing the reference to that canvas to another library. I will try moving the Cesium canvas off screen 9999px for now due to the issues I have with opacity and display none, unless there is anything else you can think of?

It’s hard to make a recommendation here without knowing a bit more information. The straightforward way to not draw the canvas to the screen is display:none. But it sounds like you need to hide it, but still display it somewhere else.

So if you had a way to change which canvas CesiumJS is rendering to dynamically, that’d be an easier fix wouldn’t it? And probably more efficient since you’d avoid rendering to a canvas that isn’t visible.