Bug en javascript

Bonjour,
J'ai un code que je n'arrive pas à faire marcher . Le code html est :

<!DOCTYPE html>
<html>
  <head>
      <title>Jeu du serpent</title>
      <h1>hello</h1>
      <script src="script4.js"></script>
  </head>

  <body>

  </body>

</html>

et le code javascript est :

window.onload = function()
{
    var cancasWidth = 900;
    var canvasHeigth = 600;
    var blockSize = 30;
    var ctx;
    var delay = 100;
    var snakee;

    init();

    function init()
    {
      var canvas = document.createElement('canvas');
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;
      canvas.style.border = "1px solid";
      document.body.appendChild(canvas);
      ctx = canvas.getContext('2d');
      snakee = new Snake([[6,4],[5,4],[4,4]]);
      refreshCanvas();
    }

    function refreshCanvas()
    {
        ctx.clearRect(0,0,canvasWidth, canvasHeight);
        snakee.draw();
        setTimeout(refreshCanvas,delay);
    }

    function drawBlock(ctx, position)
    {
        var x = position[0] * blockSize;
        var y = position[1] * blockSize;
        ctx.fillRect(x ,y , blockSize, blockSize);
    }

      function Snake(body)
    {
        this.body = body;
        this.draw = function()
        {
          ctx.save();
          ctx.fillStyle = "#ff0000";
          for (var i = 0; i < this.body.length; i++)
          {
              drawBlock(ctx, this.body[i]);
          }
          ctx.restore();
        };

    }

}

Est-ce que ça marche pour vous? Je viens de vérifier toutes les ligne 3 fois et je n'arrive pas à débuger la situtation. Je n'ai qu'une page avec hello qui s'affiche et nommé jeu du serpent. Normalement selon la démo, je devrais avoir un cadre noir et un serpent sous la fornme de trois carrés rouge les uns à côtés des autres.
Merci d'avance de vos réponses.
Diego