Override default inline css when compiling to wasm

[phrozen]

The default wasm compliation creates the html, body and canvas with inline css style properties to a fixed 100% height. Is there a way to change those to a 100% width to allow for dynamically resizing the canvas? I'm currently using p5js embedded sketches in my dev blog and I can make the iframes resposive by changing the height after a resize event. But for ebiten that does not work because the height is set initially and the canvas will just center vertically instead of resizing to the upper left corner.

[hajimehoshi]

Hi,

But for ebiten that does not work because the height is set initially and the canvas will just center vertically instead of resizing to the upper left corner.

So you want to keep the screen on the upper left corner, right? What about modifying your Layout function to always return the outside size?

[hajimehoshi]

What I figured out by playing with the dev tools is that Ebiten changes the internal (embedded) canvas size based on the iframe width and height automatically!

Yes, updateSize is called anytime when the iframe size is changed.

I want to keep my logical screen size always the same (same pixel count). And scale it to the full width of the container (iframe) and maintain aspect ratio on the height. Dinamically/responsive.

So did my last suggestion work?

func (game *GameOfLife) Layout(width, height int) (int, int) {
	return fixedWidth, int(fixedWidth * float64(height) / float64(width))
}

[phrozen]

Unfortunately no, there is no way around it. I want to keep my logical screen size always the same.

Yes, updateSize is called anytime when the iframe size is changed.

The problem is that to make it responsive, Ebiten only changes the canvas size based on the iframe width and size. So the only way to actually resize Ebiten's canvas, is to resize the iframe itself.

Here is the demo with the working solution by recalculating the iframe's width and height (not ideal but works), try resizing the browser to see the difference between examples:

https://phrozen.github.io/canvas-embed-example/#solution

[phrozen]

It is also REALLY weird and this is probably browser related...

If I have fixed width and height iframe, and I resize the window in Chrome (windows), only the width changes and the height remains the same.

But if I use the Dev Tools "Responsive" mode with "toggle Device Toolbar" then the height changes also when resizing! (which is what I wanted in the first place!

Is that a bug?

[hajimehoshi]

Aha, perhaps do you want to keep the aspect ratio of the iframe? In this case, this is not Ebiten's responsibility since Ebiten doesn't care what the outside world is.

IIUC, in CSS, just setting max-width and not setting width/height should keep the aspect ratio of the iframe element.

https://stackoverflow.com/questions/12912048/how-to-maintain-aspect-ratio-using-html-img-tag

[phrozen]

Thank you! Will take a look!