A bit of background:
I am making a 2d browser game. The rendering code splits moving objects and decor objects into two groups, and then draws each group as a whole onto an 8192x8192 canvas that is not directly displayed. This is done only when something in this group somehow changes. For all frames, the following is performed:
canvas.drawImage(zoneBufferStatic, Math.floor((w/2 - playerX) * tileSize), Math.floor((h/2 - playerY) * tileSize)); canvas.drawImage(zoneBufferDynamic, Math.floor((w/2 - playerX) * tileSize), Math.floor((h/2 - playerY) * tileSize));
(where canvas is the 2d context of the canvas visible by the user; zoneBufferStatic and zoneBufferDynamic are the zoneBufferDynamic for landscapes and moving objects, respectively; w and h are the width and height of the canvas visible by the user in tiles, playerX and playerY are the player’s position, again in the tiles, and tileSize is the number of pixels on the side of the tile, currently 32)
The user interface (chat text, dialogs) is drawn directly on the visible canvas.
The two drawImage calls shown above work exactly the same as on my desktop (16 GB of RAM, i7, GTX 780), but do nothing on my Chromebook (Samsung ARM (code names, snow), 2 GB of RAM ) The user interface is displayed normally, but the scenery and characters are never displayed. There are no errors in the Chrome Developer Console. I have confirmed that inverse buffers are created using document.body.appendChild(zoneBufferStatic) in the Chrome Developer Console.
Is there a better way to do this, or a (non-hacker) way to detect when it fails, so I can return to drawing directly on the visible canvas?
source share