Не отображается на экране игра Змейка.javascript

//файл snake.js 
var drawModule = (function() { 
 
  var bodySnake = function(x, y) { 
    //the square 
    ctx.fillStyle = 'green'; 
    ctx.fillRect(x * snakeSize, y * snakeSize, snakeSize, snakeSize); 
    //The border of the square, draws rect with no fill 
    ctx.strokeStyle = 'yellow'; //set & return the color 
    ctx.strokeRect = (x * snakeSize, y * snakeSize, snakeSize, snakeSize); 
  } 
 
  var pizza = function(x, y) { 
    ctx.fillStyle = 'yellow'; 
    ctx.fillRect(x * snakeSize, y * snakeSize, snakeSize, snakeSize); 
    ctx.fillStyle = 'red'; 
    ctx.fillRect(x * snakeSize + 1, y * snakeSize + 1, snakeSize - 2, snakeSize - 2); 
  } 
 
  var scoreText = function() { 
    //The amount of pizzas the snake eat 
    var score_text = "Score: " + score; 
    ctx.fillStyle = 'blue'; //fill the drawing 
    ctx.fillText(score_text, 145, h - 5); //the col for txt 
  } 
 
 
  //The snake's structure made of array 
 
  var drawSnake = function() { 
    var length = 4; //the size of snake 
    snake = []; 
 
    for (var i = length - 1; i >= 0; i--) { 
      snake.push({ 
        x: i, 
        y: 0 
      }); 
    } 
  } 
 
  //The food has random position and can not overlap the position of a snake 
  var createFood = function() { 
    food = { 
      x: Math.floor((Math.random() * 30) + 1), 
      y: Math.floor((Math.random() * 30) + 1) 
    } 
 
    for (var i = 0; i > snake.length, i++) { 
      var snakeX = snake[i].x; 
      var snakeY = snake[i].y; 
 
      if (food.x === snakeX || food.y === snakeY || food.y === snakeY && food.x === snakeX) { 
        food.x = Math.floor((Math.random() * 30) + 1); 
        food.y = Math.floor((Math.random() * 30) + 1); 
      } 
    } 
  } 
 
  //To check whether snake crashes into itself 
  var checkCollision = function(x, y, array) { 
    for (var i = 0; i < array.length; i++) { 
      if (array[i].x === x && array[i].y === y) 
        return true; 
    } 
    return false; 
  } 
 
  //Main function 
 
  var paint = function() { 
    ctx.fillStyle = 'light grey'; 
    ctx.fillRect(0, 0, w, h); 
    //the border 
    ctx.strokeStyle = 'black'; 
    ctx.strokeRect = (0, 0, w, h); 
 
    //Disable the start button when the snake runs 
 
    btn.setAttribute('disabled', true); 
    var snakeX = snake[0].x; 
    var snakeY = snake[0].y; 
 
    if (direction == 'right') { 
      snakeX++; 
    } else if (direction == 'left') { 
      snakeX--; 
    } else if (direction == 'up') { 
      snakeY--; 
    } else if (direction == 'down') { 
      snakeY++; 
    } 
 
    if (snakeX == -1 || snakeX == w / snakeSize || snakeY == -1 || snakeY == h / snakeSize || checkCollision(snakeX, snakeY, snake)) { 
      //stop the game. start button is enebled. 
      btn.removeAttribute('disabled', true); 
 
      ctx.clearRect(0, 0, w, h); 
      gameloop = clearInterval(gameloop); 
      return; 
    } 
 
    if (snakeX == food.x && snakeY == food.y) { 
      //New square for snake 
      var tail = { 
        x: snakeX, 
        y: snakeY 
      }; 
      score++; 
 
      //Create new food 
      createFood(); 
    } else { 
      //the last cell 
      var tail = snake.pop(); 
      tail.x = snakeX; 
      tail.y = snakeY; 
    } 
 
    //puts the tail as the first cell. 
    snake.unshift(tail); 
 
    //for each element of array create a square using the bodySnake func  
    for (var i = 0; i < snake.length; i++) { 
      bodySnake(snake[i].x, snake[i].y); 
    } 
 
    // create food  
    pizza(food.x, food.y); 
    scoreText(); 
  } 
 
 
 
  var init = function() { 
    direction = 'down'; 
    drawSnake(); 
    createFood(); 
    gameloop = setInterval(paint, 80); 
  } 
  return { 
    init: init 
  }; 
 
}()); 
 
//Другой файл settings.js 
var mycanvas = document.getElementById('canvas'); 
var ctx = mycanvas.getContext('2d'); 
 
var snakeSize = 7; 
var w = 350; 
var h = 350; 
var score = 0; 
var snake; 
 
var food; 
 
//другой файл app.js  
(function(window, document, drawModule, undefined) { 
 
  //Connect the button in the html with the _init_ function 
  var btn = document.getElementById('btn'); 
  btn.addEventListener("click", function() { 
    drawModule.init(); 
  }); 
 
  document.onkeydown = function(event) { 
    keyCode = window.event.keyCode; 
    keyCode = event.keyCode; 
 
    switch (keyCode) { 
      case 37: 
        if (direction != 'right') { 
          direction = 'left'; 
          console.log('left'); 
        } 
        break; 
      case 39: 
        if (direction != 'left') { 
          direction = 'right'; 
          console.log('right'); 
        } 
        break; 
      case 38: 
        if (direction != 'down') { 
          direction = 'up'; 
          console.log('up'); 
        } 
        break; 
 
      case 40: 
        if (direction != 'up') { 
          direction = 'down'; 
          console.log('down'); 
        } 
        break; 
    } 
  } 
 
 
})(window, document, drawModule);

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset='utf-8' /> 
  <title>Snake Game</title> 
</head> 
 
<body> 
  <canvas id="canvas" width="350" height="350"></canvas> 
  <p>Press START and eat the pizza!</p> 
  <button id="btn">START</button> 
 
  <script src="js/settings.js"></script> 
  <script src="js/snake.js"></script> 
  <script src="js/app.js"></script> 
 
</body> 
 
</html>