Resizing canvas...

[Mark Sibly]

Hi,

Is there any trick to resizing the emscripten canvas from 'outside' the emscripten app, ie: from some JS in the main html file?

I have this working fine in a plain JS app, but not in an emscripten app - the canvas seems to 'reset' to it's initial size, and repositions itself in the lower left corner.

Do I need to somehow notify emscripten that the canvas has changed size, perhaps via a Module.blah call?

I'm basically trying to add a 'splitter' between the canvas and the console, but ultimately I'd also like to have the canvas 'full window', so it resizes when the browser window does.

Bye!

Mark

[Floh]

I think what happens is that the canvas and attached WebGL framebuffer is properly resized, but the GL context's viewport state (or rather your engine) isn't aware of the resize (that's why it is rendering to the lower-left-corner, since GL's origin is bottom left).

Canvas resize (apart from going fullscreen) is currently also not handled in my engine, but I played around with it a bit and got it to work this way:

- once per frame, get the current canvas size calling emscripten_get_canvas_size()
- if the canvas size has changed since last frame, do whatever needs to be done in your engine (at the simplest, change the calls to glViewport to use the new size)

With this I could simply do a 'canvas.width = x' in the browser Javascript console, and the rendering looked correkt (without the fix, I also got the 'lower-left-corner rendering').

It might also be possible to get a callback invoked from emscripten whenever the canvas size changes. There is a resize callback 'emscripten_set_resize_callback' in emscripten/html5.h which might do the right thing, although this might be called for the whole DOM, not the canvas, I'm not sure (see: https://w3c.github.io/uievents/#event-type-resize).

Cheers,
-Floh.

[Mark Sibly]

Thanks for the tip!

I should probably have mentioned I'm using SDL, although I think it's basically the same problem(s)...

Anyway, I've got dynamic canvas resizing working now, via a combination of Module.setCanvasSize( w,h ) and polling for canvas size changes as you suggested.

However mouse coordinates are now all 'offset' by a significant amount after a canvas resize. This also happens with the standard html (not my tweaked version) after you go into fullscreen mode. Any known fixes for this?

--
You received this message because you are subscribed to a topic in the Google Groups "emscripten-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/emscripten-discuss/NONijDAFuTE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to emscripten-disc...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Mark Sibly]

Ok, turns out I need to call SDL_SetWindowSize after a canvas size changed is detected to fix mouse coords issue.

Unfortunately, this causes canvas to glitch out quite a bit while dynamically resizing, and causes fullscreen mode to exit as soon as you click on it!

Might work on something else for a while...