I am making a game and in it I would like to have the ability to use cached canvas's instead of rotating the image every frame. I think I made a function for adding images that makes sense to me, but I am getting an error every frame that tells me that the canvas object is no longer available.

INVALID_STATE_ERR: DOM Exception 11: An attempt was made to use an object that is not, or is no longer, usable.

You might also need to know that I am using object.set(); to go ahead and add that image to a renderArray. That may be affecting whether the canvas object is still avaliable?

Here is the function that returns a cached canvas, (I took it from a post on this website :D)

rotateAndCache = function(image, angle){
    var offscreenCanvas = document.createElement('canvas');
    var offscreenCtx = offscreenCanvas.getContext('2d');
    var size = Math.max(image.width, image.height);
    offscreenCanvas.width = size;
    offscreenCanvas.height = size;
    offscreenCtx.translate(size/2, size/2);
    offscreenCtx.rotate(angle + Math.PI/2);
    offscreenCtx.drawImage(image, -(image.width/2), -(image.height/2));
    return offscreenCanvas;
}

And here is some more marked up code:

var game = {
    render:function(){
    //gets called every frame
        context.clearRect(0, 0, canvas.width, canvas.height);
        for(i = 0; i < game.renderArray.length; i++){
            switch(game.renderArray[i].type){
                case "image":
                    context.save();
                    context.translate(game.renderArray[i].x, game.renderArray[i].y);
                    context.rotate(Math.PI*game.renderArray[i].rotation/180);
                    context.translate(-game.renderArray[i].x, -game.renderArray[i].y);
                    context.drawImage(game.renderArray[i].image, game.renderArray[i].x, game.renderArray[i].y);
                    context.restore();
                    break;
            }
            if(game.renderArray[i].remove == true){
                game.renderArray.splice(i,1);
                if(i > 1){
                    i--;
                }else{
                    break;
                }
            }
        }
    },
    size:function(width, height){
        canvas.height = height;
        canvas.width = width;
        return height + "," + width;
    },
    renderArray:new Array(),
    //initialize the renderArray
    image:function(src, angle){
        if(angle != undefined){
                    //if the argument 'angle' was given
            this.tmp = new Image();
            this.tmp.src = src;
                    //sets 'this.image' (peach.image) to the canvas. It then should get rendered in the next frame, but apparently it doesn't work...
            this.image = rotateAndCache(this.tmp, angle);
        }else{
            this.image = new Image();
            this.image.src = src;
        }
        this.x = 0;
        this.y = 0;
        this.rotation = 0;
        this.destroy = function(){
            this.remove = true;
            return "destroyed";
        };
        this.remove = false;
        this.type = "image";
        this.set = function(){
            game.renderArray.push(this);    
        }
    }
};

var canvas, context, peach;

$(document).ready(function(){
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    //make the variable peach a new game.image with src of meme.jpg and an angle of 20.
    peach = new game.image('meme.jpg', 20);
    peach.set();
    game.size(700,500);
    animLoop();
});

If you want, here is this project hosted on my site: http://keirp.com/zap

• javascript
• html5
• caching
• object
• canvas

There are no errors on your page, at least not anymore or not that I can see.

It's quite possible that the problem is an image that is not done loading. For instance that error will happen if you try to make a canvas pattern out of a not-yet-finished-loading image. Use something like pxloader or your own image loading function to make sure all the images are complete before you start drawing.

Anyway, it's nigh impossible to figure out what was or is happening since your code isn't actually giving any errors (anymore).