Docs: wasm single page example

[Zireael07]

The docs only mention that iframe use is recommended. Why? The examples page is so cluttered that is impossible to tell what HTML layout ebiten expects (when I just put wasm_exec.js on an empty html page, ebiten used the whole page for rendering, resulting in about 30 fps. When I tried to manually add a canvas in HTML, it stopped working at all.)

Please make an examples or docs subpage that tells us how to make it work (e.g. show the HTML code, without pako_inflate.js and other bonus stuff)

EDIT: I figured out that ebiten auto-creates a canvas in the empty page, is there a way to tell ebiten what canvas dimensions I want?

[hajimehoshi]

Thanks, I'll consider this.

The docs only mention that iframe use is recommended. Why?

Ebiten's wasm tries to create its own canvas and fill the background with black. An iframe will give you control of the element.

is there a way to tell ebiten what canvas dimensions I want?

No, and I don't plan to add this feature.

[Zireael07]

Any reasons why not? Pretty much every engine (HaxeFlixel, Godot, Pixi.js) allows setting window dimensions (ebiten does have SetWindowSize), and that means canvas dimensions for WASM (and an iframe workaround, while working, is, honestly, a pain in the ass)

[hajimehoshi]

It's because there have not been such requests, and not considering external canvases makes things simpler.

I'll consider it if you strongly request :-)

ebiten does have SetWindowSize

This doesn't work on browsers. Changing the iframe size modify canvas size automatically.

[Zireael07]

Consider it strongly requested - since it's creating its canvas either way, having the user specify the dimensions should not be difficult. Can be named SetWindowSize, setCanvasSize, whatever. If my Go-fu was better, I'd make a PR :)

[hajimehoshi]

since it's creating its canvas either way, having the user specify the dimensions should not be difficult.

Have you tried using Game interface and Layout function?

https://pkg.go.dev/github.com/hajimehoshi/ebiten?tab=doc#Game

Can be named SetWindowSize, setCanvasSize, whatever.

No, I won't add new more functions to control outside world for browsers.

[hajimehoshi]

Consider it strongly requested

Before considering it, I want to confirm that you have understood the current Ebiten's API (e.g., Layout) :-)

https://ebiten.org/blog/resizable.html is a document explaining what is Layout and why it is introduced.

[Zireael07]

Resizable and layout seem like needless complexity if all I want to do is change canvas size...

[hajimehoshi]

Is this so complex? In the current Ebiten's policy, Ebiten doesn't offer the way to change the size of canvas anyway, and you can control the game logical screen size by Layout. If you want to change the canvas size, you can write your JavaScript, right?

Though I think it is a little odd if Ebiten would offer the way to change the size of the canvas, treating a canvas as a window might be an interesting option: for example, the mascot example could work on the page, maybe? This is a different discussion from whether making an external canvas available to Ebiten or not.

[Zireael07]

At any rate, iframe is an acceptable workaround, but REALLY needs an example.

[hajimehoshi]

REALLY needs an example.

That's a very good point. I'll leave this task as a documentation task. I appreciate your feedback!