13

A little background:

I'm making a 2d browser-based game. The rendering code splits moving objects and scenery objects into two groups and then draws each group in its entirety onto an 8192x8192 canvas, which is not displayed directly. This is only done when something in that group changes in some way. For all frames, the following is done:

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 user-visible canvas; zoneBufferStatic and zoneBufferDynamic are the offscreen canvases for scenery and moving objects, respectively; w and h are the width and height of the user-visible canvas in tiles; playerX and playerY are the player's position, again in tiles; and tileSize is the number of pixels on the side of a tile, currently 32)

The UI (chat text, dialogs) is drawn directly on the visible canvas.

The two drawImage calls shown above work exactly as they should on my desktop (16GB RAM, i7, GTX 780) but do nothing on my Chromebook (Samsung ARM (codenames daisy, snow), 2GB RAM). The UI is displayed normally, but the scenery and characters are never shown. There are no errors in Chrome's developer console. I have confirmed that the back buffers are being drawn using document.body.appendChild(zoneBufferStatic) in the Chrome developer console.

Is there a better way to do this, or a (non-hacky) way to detect when it fails so I can fall back to drawing directly on the visible canvas?

n1stre
  • 5,856
  • 4
  • 20
  • 41
BenLubar
  • 403
  • 4
  • 13
  • @Stano there are no messages in Firefox, but the rendering works fine in Firefox. Then again, I only have Firefox on my desktop. – BenLubar Aug 08 '13 at 14:28
  • @Stano The function doesn't stop - things that get called before and after the two drawImage calls still work on the Chromebook. The two drawImage calls seem to be silently ignored. – BenLubar Aug 08 '13 at 15:13
  • possible duplicate of [Maximum size of a element](http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element) Another user in this thread http://stackoverflow.com/questions/18122328/canvas-drawimage-size-error/18129987#18129987 says he can use 15000 pixels. This will vary from browser to browser. Look at my answer in that thread to see possible workarounds. –  Aug 08 '13 at 15:50
  • @Ken the "back buffer" canvases are being drawn without problems. It's the drawing of those canvases on the main (visible) canvas that silently fails. – BenLubar Aug 08 '13 at 16:44
  • 1
    @BenLubar Did you ever work out the issue here? I'm getting something somewhat similar but on an iPad.. – Ben Mar 14 '17 at 21:54
  • @Ben I'm not certain but I think it was the size of the image being drawn being too big. – BenLubar Mar 15 '17 at 05:10

1 Answers1

0

Is it possible that the Chromebook is running out of memory and that could be causing an issue? If each pixel is 4 bytes (RGBA) and you have 67.1 million pixels in memory (8192x8192) that's almost 250Mb of RAM. If you have a bunch of other programs running or tabs open plus the operating system using RAM you could easily be running out of RAM I guess. 2Gb isn't much memory these days.

leisheng
  • 340
  • 1
  • 8