Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to make canvas full browser window dimensions? #67

Open
kevzettler opened this issue Mar 4, 2020 · 3 comments
Open

How to make canvas full browser window dimensions? #67

kevzettler opened this issue Mar 4, 2020 · 3 comments

Comments

@kevzettler
Copy link

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
Copy link
Owner

db48x commented Sep 14, 2020

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
Copy link

sczther commented May 24, 2021

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
Copy link

iocmet commented May 23, 2022

i have same problem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@kevzettler @db48x @sczther @iocmet