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

Questions
1

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)

image
image1848×990 4.69 KB

What I want is this: (no space anywhere)

image
image1847×953 1.83 KB

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:

2

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
3

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
4

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

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

5

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

6

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
7

do you have example html and js? Can you share it?

8

Hey sorry the late answer, but this is what I got on my canva styles!

  const canvas = document.createElement("canvas");
  canvas.style.width = "100%";
  canvas.style.height = "100%";
  canvas.id = "gameCanvas";
  document.body.appendChild(canvas);