Variable suddenly becomes undefined?

I am trying to work out how to load some images in to javascript to work with the canvas. I figured that first I would take JSON object and process all the members of the array...

canvasAssets = [{name开发者_如何学编程:"purple_guy", src:"sprites/purpleguy.png", type: "image"}];

function loadAssets(){
alert(canvasAssets); // THIS WORKS
    //parse all assets
    for(i=0;i<canvasAssets.length;i++){
    alert(canvasAssets); //THIS WORKS
        //image assets
        if(cavasAssets[i].type == "image"){ //ERRORS HERE saying undefined
        alert(canvasAssets);
            name = cavasAssets[i].name;
            imageAssets[name] = new Image();
            imageAssets[name].onload = function(){
                                            completedAssets++;
                                            if(completedAssets = canvasAssets.length){
                                                drawCanvas();
                                            }
                                        };
            imageAssets[name].src = cavasAssets[i].src;
        }
    }
}

The problem I'm having at the moment is that suddently in the if() block if(cavasAssets[i].type == "image"), it says that my variable is undefined, and I don't know why.

You have a typo cavasAssets should be canvasAssets. I would look through the code again, some more i see right off the back name = cavasAssets[i].name and imageAssets[name].src = cavasAssets[i].src; Just do a find and replace as you've been consistently spelling it wrong.