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.

Answer 1

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;

Answer 2

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)