HTML5 Canvas Memory Issue in IE

Question

I am creating a HTML5 game using canvas. I am getting an error when running the game in IE. The error message is "Not enough storage is available to complete this operation". The error occurs when calling ctx.drawImage. This only happens towards the end of the game. Several other images/sprites are draw in the exact same way throughout the game without any issues. This do not happen when using Chrome or Firefox. Any suggestions?

Here is my flow:

1) At the start of the game, I load several images into an array called Game.sprites

var imageObj = new Image();
imageObj.src = assetDir + "Images/myImage.png";
Game.sprites.myAnimation = new AnimatedSpriteSheet(imageObj, 0, 0, 1200, 1200, 4, 14);

I do the above for about 100 sprite sheets

function AnimatedSpriteSheet(img, startX, startY, width, height, imagesPerRow, imageCount){
  this.img = img;
  this.startX = startX;
  this.startY = startY;
  this.width = width;
  this.height = height;
  this.imagesPerRow = imagesPerRow;
  this.imageCount = imageCount;
}


AnimatedSpriteSheet.prototype.draw = function(ctx, posX, posY, width, height, imageIndex){
try{
    //Determine position of image to draw
    var row = Math.floor(imageIndex/this.imagesPerRow);
    var column = imageIndex%this.imagesPerRow;
    ctx.drawImage(this.img, this.startX + (column*this.width), this.startY + (row*this.height), this.width, this.height, posX, posY, width, height);
    return true;
  }catch(err){
    console.log("Error: AnimatedSpriteSheet.draw for image " + this.img.href + " " + err.message);
    return false;
  }
}

2) During the game I add certain images to an array called Game.sceneObjects.

Game.sceneObjects.push(new MyAnimationObject("", Game.sprites.myAnimation, Game.cWidth*.3, Game.cHeight*.3, Game.cWidth*.4, Game.cWidth*.4, 0, 2));

function MyAnimationObject(tag, obj, x, y, width, height, startIndex, ticksPerFrame){
  this.tag = tag;
  this.obj = obj;
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
  this.currentIndex = startIndex;
  this.tickCount = 0;
  this.ticksPerFrame = ticksPerFrame;
};

MyAnimationObject.prototype.draw = function(ctx){
  this.obj.draw(ctx, this.x, this.y, this.width, this.height, this.currentIndex);
};

MyAnimationObject.prototype.update = function(){
  this.tickCount += 1;
  if (this.tickCount > this.ticksPerFrame){
      this.tickCount = 0;
      if (this.currentIndex < this.obj.imageCount - 1){
          this.currentIndex += 1;
      }
  }
};

3) I draw each image in the sceneObjects array

Game.ctx.clearRect(0,0, Game.cWidth, Game.cHeight);
$.each(Game.sceneObjects, function(key, value){
  value.draw(Game.ctx);
});

4) At the beginning of a new screen/scene I clear the object out.

for (var i = 0; i < Game.sceneObjects.length; i++){
    delete Game.sceneObjects[i];
}
Game.sceneObjects = [];

UPDATE:

If I start the game in the middle or after the middle, the end does not have this issue. It is only if I start the game sometime before the middle. There is some kind of memory issue, but I can't figure it out.

score 2 · Answer 1 · answered Aug 01 '15 at 16:15

2

You're not really clearing your sceneObjects array.

The delete command will only set the specified array element as undefined, but won't remove it from the array. It is the equivalent of this:

// element 5362 equals undefined but is still an element in the array
Game.sceneObjects[5362]=undefined;

Instead, set the array length to zero. This causes the array to have no elements.

Game.sceneObjects.length=0;

answered Aug 01 '15 at 16:15

markE

102,905
11
164
176

But, there is no more link to element, and gc will remove it from memory if undefined, or not? – Alex Nikulin Aug 01 '15 at 18:30
Not to worry...The empty array itself (Game.sceneObjects) is still referenced (still exists) and will not be garbage collected. – markE Aug 01 '15 at 19:02
@markE - I removed the delete and replace it with the setting the length to 0 for the array. It is still having the same issue. I looked at the memory profile and it still shows the memory increasing every new scene. – Dan Burgener Aug 02 '15 at 13:58

score 0 · Answer 2 · edited May 23 '17 at 12:29

0

It is because of ie max size canvas limit.Read this post canvas size limit. What version of IE do you use?Your solution will be not exceed this limits (result canvas width and height)

edited May 23 '17 at 12:29

Community

1
1

answered Aug 01 '15 at 15:12

Alex Nikulin

8,194
4
35
37

My canvas size is 1020px x 680px. MSDN says the max size is 8192px x 8192px. Each image I draw to the canvas is smaller then the canvas. – Dan Burgener Aug 01 '15 at 15:50

HTML5 Canvas Memory Issue in IE

2 Answers2