How to align a div to a 2D Element

I have a div node that is placed at the center of the screen.
After a lot of fighting with CSS style, I’m still not very happy with the result.
I’d like to set the position and the size of the div, based on a PlayCanvas Element that is properly anchored, and that scales based on the 2D Screen blend settings.
I didn’t start digging in yet, but if someone already did it and has any hint from where to start, could give me a boost.

1 Like

:rofl: I also thought about it

Yes is definitely related. After getting position and size inside the canvas, it will probably necessary to translate them to html units, but I’m not sure.

An Element component has a property called canvasCorners: https://developer.playcanvas.com/en/api/pc.ElementComponent.html#canvasCorners . You can try and see if the values in there make sense in order to use them for your div.

2 Likes