Resize canvas problem

Questions
1

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.

2

Morning!

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

3

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

4

Can you try this?:

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

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

6

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.

7

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

8

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

9

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

10

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

2 Likes
11

Thanks for your time and advices. :innocent:

1 Like