Canvas stretch when resizing browser window

I am using VTK with WebAssembly, and the canvas css has fixed dimensions of 500 pixels, not fullscreen.

The issue I encounter is that when I resize the browser, the canvas content gets stretched.

I suspect it might be related to Emscripten or SDL, but I’m unsure how to resolve it.

Can someone provide assistance? Appreciate your help.

Based on what you are describing, it seems to be a CSS issue on your side.
If your CSS was properly defined, the canvas should keep the same size on window resize.

Unless you kept the code to resize the RenderWindow based on the window size on the JS side.

The canvas in my CSS is set with a fixed width and height, as shown in the picture.

However, whenever I resize the window, it forcefully resets the canvas width and height to match the entire browser window width and height, causing stretching.

And you don’t have a JS code that listen to the window size and set it on the vtkRenderWindow? @jaswantp any idea?

Yes, I haven’t manually added any listeners on both the JS and C++ sides.

Yea, this is a known behavior. VTK forces the window’s dimensions on the canvas. Unfortunately, there isn’t much you can do right now because this event handler is setup inside the interactor in C++ - vtkWebAssemblyRenderWindowInteractor.cxx#L43

VTK can provide 2 options:

  1. resize the canvas to window dimensions upon browser resize (current behavior)
  2. canvas ignores resize events from the browser window. (this is what you need)