Red and blue swapped in Firefox and Chrome

[dreamlayers]

trafficstars

I just tried using this library instead of Emscripten's SDL with my DOSBox port. Red and blue colours were swapped in Firefox 34 and Chrome 39 due to the masks returned by SDL_MapRGB().

DOSBox with the SDL 2 patch uses SDL_GetWindowSurface() and then SDL_MapRGB() using the format of that surface. The masks are set from const Uint32 surface_format = SDL_PIXELFORMAT_RGB888; in src/video/emscripten/SDL_emscriptenframebuffer.c.

I think that should be SDL_PIXELFORMAT_BGR888 instead, to correctly match what is returned by the HTML canvas createImageData() method. This must match because of how 32 bits are copied at a time. According to multiple sources, and the code you can play with at that link, byte order is red, green, blue, alpha. However, the order of characters in SDL_PIXELFORMAT defines is not showing byte order in memory, but most to least significant order in a word. Emscripten is little endian (see system/include/libc/bits/endian.h), which means the least significant byte is stored first, and BGR is the proper order.

If this change is made then 4e9c845 needs to be reverted. According to Microsoft documentation, CanvasPixelArray is also in red, green, blue, alpha byte order. This means data[dst ] = val & 0xff; will set red with SDL_PIXELFORMAT_BGR888. I did not test anything in IE however.

I think it makes sense to also change the format for the window, set in Emscripten_VideoInit(). I have created pull request #14 with my proposed changes.

[dreamlayers]

This commit is identical to my pull request except only I made the Emscripten_VideoInit() change. It seems a newer version of this library is available at: https://github.com/emscripten-ports/SDL2