Ryan Spice Ryan Spice - 5 months ago 15x
Javascript Question

emscripten + sdl = exception thrown: TypeError: cannot set property 'widthNative' of undefined

I just got emscripten up and running today, but no matter what example I use I keep getting the following error:

exception thrown: TypeError: Cannot set property 'widthNative' of undefined,TypeError: Cannot set property 'widthNative' of undefined
at Object.Browser.updateCanvasDimensions (file:///Users/rspice/LocalDev/UAPDevTests/bld/app.out.js:6964:30)
at Object.Browser.setCanvasSize (file:///Users/rspice/LocalDev/UAPDevTests/bld/app.out.js:6944:17)
at _emscripten_set_canvas_size (file:///Users/rspice/LocalDev/UAPDevTests/bld/app.out.js:9485:15)
at Array._Emscripten_CreateWindow (file:///Users/rspice/LocalDev/UAPDevTests/bld/app.out.js:150624:2)
at _SDL_CreateWindow (file:///Users/rspice/LocalDev/UAPDevTests/bld/app.out.js:58841:41)
at _SDL_CreateWindowAndRenderer (file:///Users/rspice/LocalDev/UAPDevTests/bld/app.out.js:34710:8)
at _main (file:///Users/rspice/LocalDev/UAPDevTests/bld/app.out.js:10433:4)
at Object.asm._main (file:///Users/rspice/LocalDev/UAPDevTests/bld/app.out.js:179274:19)
at Object.callMain (file:///Users/rspice/LocalDev/UAPDevTests/bld/app.out.js:179457:30)
at doRun (file:///Users/rspice/LocalDev/UAPDevTests/bld/app.out.js:179515:60)
2016-04-28 16:30:39.060 app.out.js:6964 Uncaught TypeError: Cannot set property 'widthNative' of undefinedBrowser.updateCanvasDimensions @ app.out.js:6964Browser.setCanvasSize @ app.out.js:6944_emscripten_set_canvas_size @ app.out.js:9485_Emscripten_CreateWindow @ app.out.js:150624_SDL_CreateWindow @ app.out.js:58841_SDL_CreateWindowAndRenderer @ app.out.js:34710_main @ app.out.js:10433asm._main @ app.out.js:179274callMain @ app.out.js:179457doRun @ app.out.js:179515run @ app.out.js:179529(anonymous function) @ app.out.js:179618

I'm using chrome, and osx elcrapitan.

Using this to compile:

/Users/rspice/LocalDev/Emscripten/emscripten/1.35.0/em++ -s USE_SDL=2 -s GL_DEBUG=1 /Users/rspice/LocalDev/UAPDevTests/src/main.cpp -o /Users/rspice/LocalDev/UAPDevTests/bld/app.out.js --use-preload-plugins

and I copied into my own files the .cpp from the tutorial at http://kripken.github.io/emscripten-site/docs/getting_started/Tutorial.html#generating-html



If I run this .cpp from elsewhere on the web I get the red box and a line, but an error:

app.out.js:6269 emscripten_set_main_loop_timing: Cannot set timing mode for main loop since a main loop does not exist! Call emscripten_set_main_loop first to set one up.

which I don't understand because it exists...


#include <stdio.h>
#include <SDL2/SDL.h>
#include <assert.h>
#ifdef __EMSCRIPTEN__
#include <emscripten.h>

SDL_Window * window;
SDL_Renderer * renderer;

void render_func(void) {
SDL_SetRenderDrawColor(renderer, 200, 0, 0, 255);

SDL_SetRenderDrawColor(renderer, 0, 255, 0, 255);
SDL_RenderDrawLine(renderer, 0, 0, 640, 320);


int main(int argc, char* argv[])
assert(SDL_Init(SDL_INIT_VIDEO) == 0);
SDL_CreateWindowAndRenderer(640, 320, 0, &window, &renderer);

emscripten_set_main_loop(render_func, 0, 1);

return 0;

And if I run this .cpp I get

(index):40 you should see a smoothly-colored square - no sharp lines but the square borders!
2016-04-29 09:36:44.049 (index):40 and here is some text that should be HTML-friendly: amp: |&| double-quote: |"| quote: |'| less-than, greater-than, html-like tags: |<cheez></cheez>|
2016-04-29 09:36:44.050 (index):40 another line.

But no colours or square.


#include <stdio.h>
#include <SDL/SDL.h>

#ifdef __EMSCRIPTEN__
#include <emscripten.h>

extern "C" int main(int argc, char** argv) {
printf("hello, world!\n");

SDL_Surface *screen = SDL_SetVideoMode(256, 256, 32, SDL_SWSURFACE);

EM_ASM("SDL.defaults.copyOnLock = false; SDL.defaults.discardOnLock = true; SDL.defaults.opaqueFrontBuffer = false;");

if (SDL_MUSTLOCK(screen)) SDL_LockSurface(screen);
for (int i = 0; i < 256; i++) {
for (int j = 0; j < 256; j++) {
// Alpha behaves like in the browser, so write proper opaque pixels.
int alpha = 255;
// To emulate native behavior with blitting to screen, alpha component is ignored. Test that it is so by outputting
// data (and testing that it does get discarded)
int alpha = (i+j) % 255;
*((Uint32*)screen->pixels + i * 256 + j) = SDL_MapRGBA(screen->format, i, j, 255-i, alpha);
if (SDL_MUSTLOCK(screen)) SDL_UnlockSurface(screen);

printf("you should see a smoothly-colored square - no sharp lines but the square borders!\n");
printf("and here is some text that should be HTML-friendly: amp: |&| double-quote: |\"| quote: |'| less-than, greater-than, html-like tags: |<cheez></cheez>|\nanother line.\n");


return 0;

And when I was trying the example to load an Image i was getting IMG_Error:

or something like that, but I'll look into that after.

Now I'm pretty sure It just wasn't clear to me and I don't understand the JS getting generated and what I need to do to run the module... because I haven't written any, and the one that works includes the JS code. Do you guys know of any good examples for that?


Answer is that I need this module in the JS.

  var Module = {
    print: (function() {
      var element = document.getElementById('output');
      return function(text) {
        element.innerHTML += text.replace('\n', '<br>', 'g') + '<br>';
    canvas: document.getElementById('canvas')

"That's basically it, yes. Define Module.print and printErr and a console app can work, add Module.canvas to get rendering. See src/shell.html for the default stuff."