I have just implemented resizing of the sdl2 canvas in a project I am working on. Reading the emscripten documentation for html5.h there is a function to set a callback on a window resize event
Setting the callback function
EMSCRIPTEN_RESULT isSetCallback =
emscripten_set_resize_callback(EMSCRIPTEN_EVENT_TARGET_WINDOW, mImpl->state, false, captureResizeEvent);
if (isSetCallback != EMSCRIPTEN_RESULT_SUCCESS)
{
throw std::string("Unable to set resize callback with EMSCRIPTEN_RESULT code %d\n", isSetCallback);
}
The callback function
EM_BOOL captureResizeEvent(int eventType, const EmscriptenUiEvent *e, void *rawState)
{
int newWidth = (int) e->windowInnerWidth;
int newHeight = (int) e->windowInnerHeight * hconstants::MAX_DIM_RATIO;
emscripten_set_canvas_element_size("canvas", newWidth, newHeight);
return 0;
}
Using this code the canvas resizes correctly as required - setting its width to the window.innerWidth and the height to a constant * window.innerHeight. However, the origin of the canvas does not appear to stay in the top left hand corner.
I use the following code to draw a square near the origin with a width and height of 5 pixels. It works initially but after resizing the canvas vertically the origin appears to move vertically.
SDL_Rect shape;
shape.x = 5;
shape.y = 5;
shape.h = 5;
shape.w = 5;
SDL_RenderDrawRect(mImpl->renderer, &shape);
Before resizing
the black square can be seen near the top left corner as expected. But after resizing
the origin has appeared to drift downwards from the top left. I am additionally drawing a black square around the whole canvas which is why there is a black line appearing in the second image (again as the origin has appeared to move from the top left corner).
I have used the element inspector to verify that the canvas physically is still at the top left hand corner and its not actually moving down the page after resizing.
Does anyone know how to fix this?
Edit : I have just tried deleting the SDL_Renderer and creating a new one from the window, and that still has not fixed the issue.