javascript push() failing

I'm trying to add cards to an array in a Deck object but for some reason push() is failing. I had this working earlier but after making some changes, I have effectively messed it up. (The "testX" writes are there for debugging purposes)

<!DOCTYPE HTML>
<html>
<head>
<style> 
  #myCanvas {
    border: 1px solid #9C9898;
  }
  body {
    margin: 0px;
    padding: 0px;
  }
</style>
<script type="text/javascript">
<!--
//draws the game
window.onload = function() { 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 

    //draws the rectangles that will be the card        
    var cardHeight = 125,
        cardWidth = 80;

    context.beginPath();  

    //draws the top row of 5 cards  
    for(var x=0;x<5;x++){
        context.rect(10+(x*(cardWidth+10)),10,cardWidth,cardHeight);
    }

    //draws the bottom row of 5 cards
    for(x=0;x<5;x++){
        context.rect(10+(x*(cardWidth+10)),150,cardWidth,cardHeight);
    }

    //draws the deck
    context.rect(10+5*cardWidth+65,(150-10)/2,cardWidth,cardHeight);

    context.fillStyle = 'white';
    context.fill();
    context.lineWidth = 2;
    context.strokeStyle = 'black';
    context.stroke();   
};


function Deck(){
    //creates the unshuffled deck (loadedDeck) once to make the shuffling process faster
    var loadedDeck = new Array(),
        realDeck;

    this.loadTheDeck = function(){ //method 

        for(x=1;x<=13;x++){ 
            this.loadedDeck.push(x+" Spades"); //<---issue line (all 4 are failing though this is the first)
            this.loadedDeck.push(x+" Clubs");
            this.loadedDeck.push(x+" Hearts");
            this.loadedDeck.push(x+" Diamonds");
        }
        document.write(this.loadedDeck);
    };
    this.loadTheDeck(); //creates the unshuffled deck when the Deck is instantiated


    //resets the deck and randomizes
    this.shuffle = function(){ //method 

        //creates the real deck
        this.realDeck = this.loadedDeck;

        //write shuffle function
    };
    this.shuffle(); //shuffles the Deck when instantiated
}

document.write("test-1");
var myDeck = new Deck();
document.write("test0");
document.write(this.realDeck);
document.write("test1");    
-->
</script>
 </head>
 <body>
<canvas id="myCanvas" height="300" width="600"></canvas>

 </body>
 </html>

Here is a demo of the code: http://jsfiddle.net/NfmsR/2/

Solution

When you run this line:

this.loadedDeck.push(x+" Spades");

You are using the this.loadedDeck array. Have you defined it as part of the Deck object? Nope:

var loadedDeck = new Array(),
    realDeck;

Change the declaration to this and it should work:

this.loadedDeck = []; // I'd use [] instead of new Array().
this.realDeck = [];

As @j08691 pointed out, you need to change realDeck to this.realDeck as well because you're calling it similarly here:

this.shuffle = function(){ //method 

    //creates the real deck
    this.realDeck = this.loadedDeck;

    //write shuffle function
};