# My step by step guides for SDL3 to build for Android and WebAssembly

**URL:** <https://discourse.libsdl.org/t/my-step-by-step-guides-for-sdl3-to-build-for-android-and-webassembly/50766>\
**Category:** SDL Development\
**Created:** [April 30, 2024, 11:39am UTC](https://discourse.libsdl.org/t/my-step-by-step-guides-for-sdl3-to-build-for-android-and-webassembly/50766 "2024-04-30T11:39:33Z")\
**Posts on this page:** 1\
**Showing post:** 40

<div class="post-metadata">

**Author:** ![8Observer8](https://discourse.libsdl.org/letter_avatar_proxy/v4/letter/8/bbe5ce/32.png) [@8Observer8](https://discourse.libsdl.org/u/8Observer8)\
**Post date:** [July 5, 2024, 1:09pm UTC](https://discourse.libsdl.org/t/my-step-by-step-guides-for-sdl3-to-build-for-android-and-webassembly/50766/40 "2024-07-05T13:09:37Z")

</div>

**Handling resizing of the canvas**

1. SDL3 - recommended. It works for Web, Desktop, Android and so on:

```cpp
int SDL_AppEvent(void *appstate, const SDL_Event *event)
{
    auto *app = (AppContext *)appstate;

    switch (event->type)
    {
        case SDL_EVENT_WINDOW_RESIZED:
        {
            int w = SDL_GetWindowSurface(app->window)->w;
            int h = SDL_GetWindowSurface(app->window)->h;
            std::cout << w << " " << h << std::endl;
            break;
        }
        case SDL_EVENT_QUIT:
        {
            app->app_quit = SDL_TRUE;
            break;
        }
        default:
        {
            break;
        }
    }

    return 0;
}

```

1. Emscripten - not recommended because it works in the browser only:

```cpp
#include <emscripten.h>
#include <emscripten/html5.h>

int SDL_AppInit(void **appstate, int argc, char *argv[])
{
    // ...

    emscripten_set_resize_callback(
        EMSCRIPTEN_EVENT_TARGET_WINDOW, nullptr, 0,
        +[](int eventType, const EmscriptenUiEvent *e, void *userData) -> EM_BOOL
        {
            int w = e->windowInnerWidth;
            int h = e->windowInnerHeight;
            std::cout << w << " " << h << std::endl;
            return EM_FALSE;
        });

    // ...
}

```

If you need a size of the canvas at the first resize:

1. SDL3 - recommended:

```cpp
bool isFirstResize = true;

int SDL_AppEvent(void *appstate, const SDL_Event *event)
{
    auto *app = (AppContext *)appstate;

    if (isFirstResize)
    {
        int w = SDL_GetWindowSurface(app->window)->w;
        int h = SDL_GetWindowSurface(app->window)->h;
        std::cout << w << " " << h << std::endl;
        isFirstResize = false;
    }

    // ...
}

```

1. Emscripten:

```cpp
#include <emscripten.h>
#include <emscripten/html5.h>

bool isFirstResize = true;

int SDL_AppEvent(void *appstate, const SDL_Event *event)
{
    auto *app = (AppContext *)appstate;

    if (isFirstResize)
    {
        int w, h;
        emscripten_get_canvas_element_size("#canvas", &w, &h);
        std::cout << w << " " << h << std::endl;
        isFirstResize = false;
    }

    // ...
}

```

---

_[View the full topic](https://discourse.libsdl.org/t/my-step-by-step-guides-for-sdl3-to-build-for-android-and-webassembly/50766)._