How to make canvas full browser window dimensions?

kevzettler commented 4 years ago

I'm trying to make the dosbox canvas full browser window dimensions width:100%,height:100% Once the loader is finished loading it resets the canvas dimensions to 640x400.

<html style="width:100%;height:100%;margin: 0 auto;">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Doom</title>
  </head>
  <body style="width:100%;height:100%;margin:0 auto;">
    <canvas id="canvas" style="width:100%;height:100%; display: block; margin: 0 auto;"/>
    <script type="text/javascript" src="es6-promise.js"></script>
    <script type="text/javascript" src="browserfs.min.js"></script>
    <script type="text/javascript" src="loader.js"></script>
    <script type="text/javascript">
      function locateAdditionalFiles(filename) {
        if (filename === "dosbox.html.mem") {
          return "emulators/em-dosbox/dosbox-sync.mem";
        }
        return "emulators/em-dosbox/"+ filename;
      }

      var emulator = new Emulator(document.querySelector("#canvas"),
                                  null,
                                  new DosBoxLoader(DosBoxLoader.emulatorJS("emulators/em-dosbox/dosbox-sync.js"),
                                                   DosBoxLoader.locateAdditionalEmulatorJS(locateAdditionalFiles),
                                                   DosBoxLoader.nativeResolution(window.innerWidth,window.innerHeight),
                                                   DosBoxLoader.mountZip("c",
                                                                         DosBoxLoader.fetchFile("Game File",
                                                                                                "examples/dosx-doom.zip")),
                                                   DosBoxLoader.extraArgs(['-c', 'cd C:/Doom']),
                                                   DosBoxLoader.startExe("doom.exe")))
      emulator.start({ waitAfterDownloading: true });
    </script>
  </body>
</html>

db48x commented 4 years ago

I'm sorry that I didn't see this earlier; my spam filter seems to have gotten above itself.

This is a use-case that I hadn't strongly considered. Currently it's written so that it prefers to set the outer canvas size to the same as the inner size, primarily to squeeze out as much performance as possible even on low-end hardware. There is a scale parameter you can set (DosBoxLoader.scale(2), for example) which lets you choose a different size. This is intended to be an integer for obvious reasons, but you can use any scale factor you want. It's a bit roundabout, but you could measure the browser's viewport size and compute the appropriate scale factor from it.

In the long term I think that the correct way to fix this is either to make that resize optional, so that your CSS rules always apply, or to provide another option that tells Emularity either how the canvas should be styled or what the outer size should be. Either seems easy to implement, but I know for a fact that full-screen mode will make them both complicated. We'll probably have to experiment to see what works.

sczther commented 3 years ago

I am not able to make the window any bigger at all. Tried using DosBoxLoader.scale(), DosBoxLoader.extraArgs('-scaler'), changing the canvas resolution, etc. Every option I try doesn't help in having the game window bigger. The problem with -scaler is that you need to change the output from surface to ddraw or something, but I cannot load a .conf file. I need to have the game screen be fullsize on a 4:3 LCD with a browser in fullscreen.

iocmet commented 2 years ago

i have same problem

db48x / emularity

How to make canvas full browser window dimensions? #67