feat: allow reuse canvas

[mikeder]

What issue is this addressing?

Closes https://github.com/hajimehoshi/ebiten/issues/3017

What type of issue is this addressing?

feature

What this PR does | solves

First attempts to select a canvas element with id="gocanvas", if one does not exist, then it is created.

This allows developers better control over the placement and sizing of the canvas element on their HTML pages.

[hajimehoshi]

Use iframe to embed an Ebitengine app. I don't want to let users inject a canvas.

[mikeder]

I don't want to let users inject a canvas.

May I ask why? An iframe is quite limited, especially when dealing with changing screen size/aspect ratio's. Other game engines allow developers to select the canvas that gets drawn to - Bevy example

[hajimehoshi]

For example, the entire Ebitengine HTML captures inputs to force to focus the canvas. When a user clicks the outside of the canvas, the canvas is focused. This can be an unexpected side effect if a user tries to modify the HTML. I might add other side effects to the HTML in the future. I decided to disallow injecting anything into the HTML or exposing anything from the HTML in order to discourage users to use the HTML directly w/o iframe.

[hajimehoshi]

especially when dealing with changing screen size/aspect ratio's

You can adjust the iframe size as you like, right?

[mikeder]

@hajimehoshi thank you for the additional context and for all the work you've done!

I do still feel that allowing the developer to control the placement of the canvas is better than forcing the app into an iframe but I'll defer to your expertise for now. The problem I have with iframes is that if we want the end user to control the size of the screen window the developer also has to code additional javascript to resize the iframe in an attempt to match. This feels very wonky in my opinion - I'd rather the canvas and Ebiten app behave more similar to a native app and automatically consume the entire screen if the end user desires.

For now I'll continue working and maybe reopen #3017 if/when I have more justification. Thanks again!

[hajimehoshi]

The problem I have with iframes is that if we want the end user to control the size of the screen window the developer also has to code additional javascript to resize the iframe in an attempt to match.

Hmm? Isn't the iframe size controlled by CSS?

[mikeder]

The problem I have with iframes is that if we want the end user to control the size of the screen window the developer also has to code additional javascript to resize the iframe in an attempt to match.

Hmm? Isn't the iframe size controlled by CSS?

Yes but that sort of speaks to the problem I'm trying to solve. IMO the app should dictate its size and not some external container styling. How else can an end user of a WASM deployment request the app to be full screen without the developer hard coding it?

[hajimehoshi]

I'm confused. I'm not sure why canvas is not problematic while iframe is.

Yes but that sort of speaks to the problem I'm trying to solve. IMO the app should dictate its size and not some external container styling. How else can an end user of a WASM deployment request the app to be full screen without the developer hard coding it?

In Ebitengine case, the developer can controll the behavior by Layout function when the outside size is changed.

[hajimehoshi]

How else can an end user of a WASM deployment request the app to be full screen without the developer hard coding it?

Perhaps, you mean you want to make the iframe fullscreen? Yes you can do it. For example, a lot of itch.io games can make games fullscreen without hardcoding this e.g. https://hajimehoshi.itch.io/game-engine-development-simulator

[mikeder]

In Ebitengine case, the developer can controll the behavior by Layout function when the outside size is changed.

Okay thanks, I'll read up on Layout usage and examples some more.