resolution resizing issue

[snowkittykira]

currently when the canvas is resized (e.g when going fullscreen) the game view is stretched, would it be possible to have the game resolution automatically reflect the canvas size like when the window is resized on desktop?

[makorendev]

I've been playing around with this, and I've been able to get this C++ to work in an empty SDL + Emscripten project:

// on startup, outside of functions
EM_JS(int, get_window_width, (), {
    return window.innerWidth;
});

EM_JS(int, get_window_height, (), {
    return window.innerHeight;
});

// in update loop
int w = get_window_width();
int h = get_window_height();
emscripten_set_canvas_element_size("#canvas", w, h);
SDL_SetWindowSize(window, w, h);

It's a hacky solution, since this will try to resize the canvas + SDL window every frame instead of only when the browser window resizes. But it works, the content is displayed in the window with no stretching even after resize.

I'd try to test this with love.js itself, but I can't even get the megasource to build right now.

[snowkittykira]

thanks! i managed to get it working from the javascript side like this:

      function resizeCanvas() {
          const canvas = document.getElementById('canvas');
          const loadingCanvas = document.getElementById('loadingCanvas');
          const width = canvas.clientWidth;
          const height = canvas.clientHeight;

          if (canvas.width !== width || canvas.height !== height) {
              canvas.width = width;
              canvas.height = height;
          }
          if (loadingCanvas.width !== width || loadingCanvas.height !== height) {
              loadingCanvas.width = width;
              loadingCanvas.height = height;
          }
      }
      resizeCanvas();
      window.addEventListener('resize', resizeCanvas);

and then using css to make the canvas take the full window

maybe something like this should be added to the default html? i wonder if there's a way to make it fire on canvas resize instead of window resize, which would work more generally. my javascript isn't that strong though

[luttje]

I found that @snowkittykira's solution works best if the game is set to fullscreen mode (e.g: love.window.setMode(600, 920, { fullscreen = true })). Because that way the cursor positions will correctly align with what the game expects. I do this on game init. The browser will complain that the fullscreen request was denied, but löve will correctly scale to full screen mode nonetheless.

For reference: If your game needs to keep the same aspect ratio it may help you to wrap a div around the game canvas and call requestFullscreen on that instead: https://github.com/Davidobot/love.js/issues/50#issuecomment-2338513304

I concur that something like what @snowkittykira posted should be added to the HTML.