Code javascript ne fonctionne pas sur firefox

Bonjour,

Je suis débutante en javascript et je dois réaliser un pong en javascript.
J'y suis arrivée grâce à un tuto et après de nombreuses difficultées mais en voici une de plus que je n'arrive pas à résoudre. Mon code fonctionne sur tout les navigateurs sauf sur firefox.

Donc voici mon code:

//variables
var GAME_BAR_WIDTH = 80;
var GAME_BAR_HEIGHT = 10;
var PXL_DEPLA = 20;
var ZONE_GAME_WIDTH = 800;
var ZONE_GAME_HEIGHT = 500;
var COLOR_BALL = "#fff";
var SIZE_BALL = 8;
var SPEED_BALL = 2;



var barX; // X position of the bar change with keypad
var barY; // Y position of the bar don't change
var context;
var ballX ;
var ballY = 150;
var dirBallX = 0;
var dirBallY = 1;
var loop = setInterval(refreshGame);


window.addEventListener('load', function () {
// Get canvas object
var elem = document.getElementById('canvasElem');
if (!elem || !elem.getContext) {
return;
}

// Get context 2D
context = elem.getContext('2d');
if (!context) {
return;
}

//Initialisation of variables
ZONE_GAME_WIDTH = elem.width;
ZONE_GAME_HEIGHT = elem.height;
ballX = Math.random()*ZONE_GAME_WIDTH;
barX = (ZONE_GAME_WIDTH/2)-(GAME_BAR_WIDTH/2);
barY = (ZONE_GAME_HEIGHT-GAME_BAR_HEIGHT);

//Initialisation of game
createContext(context);



// Events
window.document.onkeydown = checkDepla;


}, false);


function refreshGame() {

// Clear zone
clearContext(context, 0, ZONE_GAME_WIDTH, 0, ZONE_GAME_HEIGHT);

// Get all again


// Get the bar again
context.fillStyle = "#fff";
context.fillRect(barX,barY,GAME_BAR_WIDTH,GAME_BAR_HEIGHT);

// New position of the ball

if ( (ballX + dirBallX * SPEED_BALL) > ZONE_GAME_WIDTH) dirBallX = -1;
else if ( (ballX + dirBallX * SPEED_BALL) < 0) dirBallX = 1;
if ( (ballY + dirBallY * SPEED_BALL) > ZONE_GAME_HEIGHT) {ballY = 0;
//position on X
ballX = (Math.random()*ZONE_GAME_WIDTH);}
else {
if ( (ballY + dirBallY * SPEED_BALL) < 0) dirBallY = 1;
else {
if ( ((ballY + dirBallY * SPEED_BALL) > (ZONE_GAME_HEIGHT - GAME_BAR_HEIGHT)) && ((ballX + dirBallX * SPEED_BALL) >= barX) && ((ballX + dirBallX * SPEED_BALL) <= (barX+GAME_BAR_WIDTH))) {
dirBallY = -1;
dirBallX = 2*(ballX-(barX+GAME_BAR_WIDTH/2))/GAME_BAR_WIDTH;
}
}
}


ballX += dirBallX * SPEED_BALL;
ballY += dirBallY * SPEED_BALL;

// Get the ball
context.fillStyle = COLOR_BALL;
context.beginPath();
context.arc(ballX, ballY, SIZE_BALL, 0, Math.PI*2, true);
context.closePath();
context.fill();


}

function checkDepla(e) {
// Right Key
if (e.keyCode == 39) {
if ( (barX+PXL_DEPLA+GAME_BAR_WIDTH) <= ZONE_GAME_WIDTH ) barX += PXL_DEPLA;
}
// Left Key
else if (e.keyCode == 37) {
if ( ((barX-PXL_DEPLA)) >= 0 ) barX -= PXL_DEPLA;
}


}




function clearContext(context, startwidth, contextwidth, startheight, contextheight) {
context.clearRect(startwidth, startheight, contextwidth, contextheight);
}

// Get context
function createContext(context) {}



Merci de m'aider à résoudre ce problème ça devient limite urgent.