How to update application canvas area after being moved into another div?

[LMB]

Hey everybody,

I hope someone is able to help me, with this.

I have been struggling with a problem regarding the application canvas area.

The project is using the htmlhandler (mainmenucomponent), to load bootstrap, which im using for some “nifty” repositioning.

Im using the same solution as mentioned in this post, to move the canvas into a div. Works really well.

Link:

How to render app into custom canvas (div) on website

I’ve created a 3d worldmap with Playcanvas, downloaded the source, put it on a webserver and implemented it to my website using " Serve your own HTML". Works fine! It renders a canvas right before end of body tag. What I want now is to render the canvas into a specific div that is located im my html structure with a specific size and position (like if I’m using an iframe, but I need it inline to communicate with the elements of the website). How do I control this? Thanks for helping out!

The problem consists of the canvas getting distorted, until the window is resized. Is there a method to update the canvas after its been moved into the div? Or is the problem something else?

Im a novice coder, that wants to make some cool configurators, this is my first post

Thank you in advance

Link to the editor:

https://playcanvas.com/editor/scene/1021016

[yaustar]

Looks like you need to call https://developer.playcanvas.com/en/api/pc.Application.html#resizeCanvas to resize the render resolution.

[LMB]

Thank you, i will look into it.

It helped me to style only the div instead of the applicationcanvas. The canvas adjust, so it works fine now,

However it would be smoother solving it directly on window resize, so i will try to implement resizeCanvas