Why won't my getElementById method work in the global environment?

"use strict";
var enemyYPositions = [];   
var enemyXPositions = []; 
var avatarX = 0;
var avatarY = 0;
var avatarImage; 
var enemyImage;
var ticksSurvived = 0;
var mostTicksSurvived = 0;
var refreshIntervalId;
var gameCanvas = document.getElementById("gameCanvas"); 





function setUp() {

    avatarImage = new Image();
    enemyImage = new Image(); 
    avatarImage.src = "img/avatar.png";  
    enemyImage.src = "img/enemy.png";   

    gameCanvas.getContext('2d').drawImage(avatarImage,Math.random()*100,Math.random()*100); 

    gameCanvas.addEventListener("mousemove", handleMouseMovement);
    refreshIntervalId=window.setInterval(handleTick,25);
}


function handleMouseMovement(mouseEvent) {
      avatarX = mouseEvent.offsetX; 
      avatarY = mouseEvent.offsetY; 
}

 function handleTick() {

    var currentEnemyNumber = 0;
    var numberOfEnemies = enemyXPositions.length;

        if (Math.random()<1/20) { 
        enemyYPositions.push(0);
        enemyXPositions.push(Math.random() * 400);    
        }

        while (currentEnemyNumber<numberOfEnemies) {
            enemyYPositions[currentEnemyNumber]++;   
            currentEnemyNumber++;    
         } 

    gameCanvas.getContext('2d').clearRect(0,0,400,400); 
    gameCanvas.getContext('2d').drawImage(avatarImage,avatarX,avatarY); 

    currentEnemyNumber = 0; 
    while (currentEnemyNumber<numberOfEnemies) {
        gameCanvas.getContext('2d').drawImage(enemyImage,enemyXPositions[currentEnemyNumber],enemyYPositions[currentEnemyNumber]);   
        currentEnemyNumber++;
    }
    gameCanvas.getContext('2d').font = "20px Iceland"; 
    gameCanvas.getContext('2d').textBaseline = "top"; 
    gameCanvas.getContext('2d').fillText("Current score: "+ticksSurvived,0,5);

    currentEnemyNumber = 0;  
    while (currentEnemyNumber<numberOfEnemies)  {
        if (avatarX<(enemyXPositions[currentEnemyNumber]+29) && (avatarX+29)>enemyXPositions[currentEnemyNumber] && avatarY<(enemyYPositions[currentEnemyNumber] + 29) && (avatarY+33)>enemyYPositions[currentEnemyNumber])
        {
            if (ticksSurvived>mostTicksSurvived) { 
                mostTicksSurvived = ticksSurvived; }

            var playAgain = confirm("You died. Your score was: " + ticksSurvived + '. Your high score is: ' + mostTicksSurvived + " Would you like to play again?"); 

            if (playAgain)
                startAgain(); 
            else
                gameCanvas.getContext('2d').clearRect(0,0,400,400);
                clearInterval(refreshIntervalId);

                enemyXPositions = [];
                enemyYPositions = [];
                ticksSurvived = 0;

                gameCanvas.getContext('2d').fillText("High Score: "+mostTicksSurvived,0,5);
                gameCanvas.getContext('2d').fillText("Click to play again! ",0,45);
                gameCanvas.addEventListener("click",handleTick);


        }
            currentEnemyNumber++;  // end of checking for collision
      // increase score by 1    
    }

ticksSurvived++;
}
      // end of loop checking for collision for every enemy




function startAgain() { // clears all enemies for screen by emptying the arrays


    enemyXPositions = []; // empties array
    enemyYPositions = []; // empties other array
    ticksSurvived = 0; // sets score to zero
}