Is it possible to use canvas as GUI？

Questions
#1

I want to draw the canvas generated by a chart library such as echart or highcharts as a gui.
Currently, I use the toDataURL method, but the original animation and other dynamic performance of the canvas will be lost. The way I think of at the moment is to use DynamicTexture, but I hope to have the effect of gui. Another way is to create a canvas dedicated to drawing these charts, or a VideoTexture.

#2

Hello! It is possible to do that easily with DynamicTexture, you can get the context of the canvas behind it and do anything that the Canvas API supports :slight_smile: Here’s a simple example of an animated canvas being used as DynamicTexture: Dynamic canvas | Babylon.js Playground (babylonjs.com)

In fact, that’s exactly how our GUI system works. :slight_smile:

#3

Dynamic Texture is powerful, but I want the effect to be like a 2d gui, not affected by the camera. I know it’s possible to counteract the camera in code, but it would be better if there was a container like Layer.Or can I customize AdvanceDynamicTexture?

#4

You can run another 2D engine at the same time on the same canvas - either on top or behind the babylonJS scene:
Babylon.js and Pixi.js | Babylon.js Documentation (babylonjs.com)

I have a Pixi v5 on top demo, which is needs to be fixed!
Integrations - PixiJS v5 ⋅ Storybook (brianzinn.github.io)

1 Like
#6

I implemented Video gui and Canvas gui based on Image gui as the current solution, haven’t tested the performance. If there is a problem, try other solutions.
My code:

#7

Hey there just checking in, was your question answered? @ZoeLeee