Resize canvas problem

Good morning :slight_smile:
My canvas doesn’t resizing like in playground, so I can’t get full screen on my mobile devices.
I want to my cut clear color like in playgroud. I want to avoid this white space.

Morning!

This might be related to the body/html css. Would you be able to share the page itself?

html { display: block; }
body { display: block; margin: 8px; }

Can you try this?:

html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

It helps, Thanks, but my borders doesn’t cutted, they are resizing with canvas, I want to avoid blue borders on mobiles

If you want to reproduce this on the playground, we might be able to understand what exactly the problem is. I am not sure what blue borders you are refering to, but even if you show me in a video I will still have the same answer - please help us by reproducing the issue on the playground.

I forgot to say that I’m using Orthographic camera mode

ok! so what is the actual problem? what Do I see in this playground that is wrong?

I want:
If canvas change width I will cut blue clear color around the ball.
I have:
When canvas window change it’s width ball also change width. It’s wrong

that’s not a simple task. It involves understanding where the camera should be based on your new HTML size. not very trivial, and honestly not something I would recommend. It would be better in your case to have a fixed canvas in a specific size and stretch the mesh you are rendering to be full screen. This way you have no “blue clear color”, and you control everything in HTML

1 Like

Thanks for your time and advices. :innocent:

1 Like