2d drawing over babylonjs canvas

I want to add 2d drawings using fabricjs/@tldraw/core. Is there any way to support using that? So i can add more drawings. It needs to be top of the babylonjs canvas. I tried with fabeicjs but when the window is resized at a min width babylonjs canvas starts cropping the mesh at that time drawing is not at the exact position (drawing canvas was in top of that).anyone can give example?

Could you share a repro of your issue in the playground or codepen or any other code sharing tool ?

This would help the community help you.

@sebavan sorry for the late reply, i was creating the sandbox for you. Please take a look here drawing-over-3d/main - CodeSandbox ,

Let me give you few context about what i am doing,

i have created a drawing renderer component where i have added event listener and based on that i’m collecting points to draw lines. and lines are rendered using svg/canvas render method. Everything is added with proper type safety.

Now the problem is when the babylon scene is loaded and after clicking enable drawing button the drawing div pointer-events sets to auto then you can draw lines. after drawing lines if i resize the window or viewed on another device drawing lines are not staying at the same position where it was drawn. could you help me to find a way to do it . i have seen that at some point babylonjs starts cropping the mesh i was thinking to scale the drawing but i doesn’t work. also tried with DynamicTexture where i get the ctx then drawn those lines it is also not working.

Feel free to change anything.

Thank you in advance :smiley: .

What would you expect to happen ? either the fabric part to stay centered as well like it would be a layer in babylon or the babylon part to change the target ?

I want the drawing lines to stay at same position where it has drawn. Respected to the mesh.

If you draw some lines and then resize you can see the lines are not at the same position.

If it can be part of babylonjs then it’s awesome.

I am not totally sure how you could do this. If you place it in babylon, you would need a second camera (orthographic to not suffer from the perspective zoom) looking at a plane with the fabric canvas displayed on it with an HtmlElementTexture for instance. then on resize, you will need to offset this second camera accordingly.