Emscripten SDL2 - Origin of canvas appears to move when canvas is resized

Viewed 529

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 enter image description here the black square can be seen near the top left corner as expected. But after resizing enter image description here 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.

1 Answers

OK, so I have got a solution that works but I would still be open to hearing any better solutions.

I have ended up just deleting the SDL_Renderer and the SDL_Window objects and recreating them inside of the callback function. I realise this is very inefficient, but I cant get any other solution that works so this will have to do for now.

Related