title: Canvas is null error in javascript
body: <p>i have this code :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
   &lt;style type="text/css"&gt;
   canvas{border:#666 1px solid;}
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
  
  var canvas = document.getElementById("canvas"),
          context = canvas.getContext("2d"),
          playerimage = new Image(),
          x = canvas.width / 2, //align to centre of the screen
          y = canvas.height / 2, //same as above
          speed = 5, //speed for the player to move at
          width = 50, //width of the player
          height = 50; //height of the player
  
    function init() {
  
  
     playerimage.src = "ninja.png"; //path to the image to use for the player
     canvas.addEventListener("keypress", update);
    }
  
    function update(event) {
      if (event.keyCode == 38) {
          y -= speed; //going up
      }
      if (event.keyCode == 40) {
          y += speed; //going down
      }
      if (event.keyCode == 37) {
          x -= speed; //going left
      }
      if (event.keyCode == 39) {
          x += speed; //going right
      }
      render();
  }
  
  function render() {
     // context.clearRect(0, 0, canvas.width, canvas.height);
      context.drawImage(playerimage, x, y, width, height);
  
  }
     &lt;/script&gt;
   &lt;/head&gt;
      &lt;body onload="init();"&gt;
     &lt;button onclick="init();"&gt;Draw&lt;/button&gt;
      &lt;canvas id="Mycanvas" width="550" height="400"&gt;&lt;/canvas&gt;
     &lt;/body&gt;  
    &lt;/html&gt;
  </code></pre>
  
  <p>the javascript console always give me canvas is null error </p>