Flag to disable overlayCanvas/overlayContext?

[AxeLanderMoreira]

I'm currently prototyping a game using LittleJS, and I can achieve good performance (stable 60fps) on whatever browser I use on PC.

I have successfully deployed the game on an HTML5 Smart TV environment (as a Web App for Samsung Tizen OS), which is one of my intended targets.

The game worked just the same as in the PC environment, albeit initially with a poor performance (~10 fps).

Without attempting to delve much into profiling, find out all possible bottlenecks etc, I discovered that if I remove the overlayCanvas, I get a performance improvement (from ~10 to ~20 fps, which is pretty much playable).

It makes sense to me, since the overlayCanvas is actually added on top of the mainCanvas as an on-screen HTML Element. So, it may have a performance impact depending on browser's limitations on embedded devices.

I figured that I could remove it without apparent side effects, by changing this code snippet in engine.js, from:

    document.body.appendChild(overlayCanvas = document.createElement('canvas'));
    overlayContext = overlayCanvas.getContext('2d');
    overlayCanvas.style = styleCanvas;

to

    overlayCanvas = mainCanvas;
    overlayContext = mainContext;

which is of course a rudimentary hack, however it is sufficient to prevent errors and still display the watermark normally.

My prototype is based on the 'platformer' example. My guess is that this works because in that example, both mainCanvas and overlayCanvas are redrawn completely upon each frame.

TileLayers don't seem like an issue, because they work using off-screen canvas (i.e. the element is created but not appended into the HTML page).

Finally (phew!), my questions is: It seems that overlayCanvas is primarily used to draw debug information, scoring etc., and therefore could be considered optional? Maybe there could be a flag to disable it, and/or a flag to change the way it is implemented (using an offscreen canvas instead). What do you think?

[KilledByAPixel]

Thanks for writing this up, sorry i hadn't seen it until now... so it is hard to predict how different environments may handle graphics rendering, and what the bottlenecks would be. I have it tuned pretty nicely for modern pcs and smart phones but low end devices may have different limitations.

My first suggestion is to just keep your hack, if that fixes it then you should be fine. There is no need to modify the engine code, in you're game init you can just do...

    document.body.removeChild(overlayCanvas);
    overlayCanvas = mainCanvas;
    overlayContext = mainContext;

Don't think of it as a hack, think of it as telling LittleJS that you don't want the overlay canvas it provided and to instead just use the main canvas to draw overlay stuff. Keep in mind that any non webgl rendering will now appear below the webgl layer, but that's what we expect. You can adjust the z-index of the canvas css to move the main canvas on top if you want.

Also remove the watermark code. Drawing text can be especially slow on these kind of environments. In release builds the watermark is automatically removed. This may also help with slowdown.

Let me know if that fixes your problem.