How to make the canva fill the window? (not full screen)

I create a small POC with Electron and React, but I cannot manage to make the canva fill the window, what I got were this: (see the black space on the bottom)

What I want is this: (no space anywhere)

I don’t know exactly which option should do this, I believe was the adaptToDeviceRatio but I’ve tried it and don’t work either. I also applied the canva styles like the demos do, but still nothing work.

I create a scene component based on this doc and I’m using it to test.

What I’m doing wrong? :sweat_smile:

Hi @Alecell

As long as the canvas and parent container and document (body) are all 100% height or 100vh and meta viewport is set and zero out padding and margins, it should be full window.

1 Like

Hello!
As an addition to @inteja keep in mind that the canvas has its own width and height property and a style.width and height property. So you can end up with a 200x200 px canvas (canvas.width x canvas.height) stretched to 1920x1080 (canvas.style.width x canvas.style.height).

1 Like

When I added the 100vh the content got stretched :confused:

I’ll make more tests and return here :thinking:

If you set the canvas.width/height values to window.innerWidth/innerHeight it will prevent stretching of your content

I just realize that I should not add the style directly on DevTools, but add on the element style. When I do that things simple start work!

Thank you!

1 Like