title: There is something wrong with the canvas
body: <p>Can you help me? The image of the cat is not showing on the canvas. I don't know what is wrongs with my code.</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link type="text/stylesheet" rel="stylesheet" href="style.css" /&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;center&gt;
          &lt;h1&gt;Little Cat&lt;/h1&gt;
          &lt;canvas id="main" height="300" width="300"&gt;&lt;/canvas&gt;
      &lt;/center&gt;
      &lt;script type="text/javascript" rel="javascript" src="script.js"&gt;Try another browser&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var canvas = document.getElementById('main'),
  ctx = canvas.getContext('2d');
  
  
  var catI = new Image();
      catI.src = "Image/cat.gif";
  
  
  
  function Cat(x, y){
      this.x = x || 20, this.y = y || 50, this.img = catI, this.speed = 3,     this.keyInput = {};
  
  this.display = function(){
  
      //control movements
      if(this.keyInput[38] === true){
          this.y -= this.speed;
      }
      if(this.keyInput[40] === true){
          this.y += this.speed;
      }
      if(this.keyInput[37] === true){
          this.x -= this.speed;
      }
      if(this.keyInput[39] === true){
          this.x += this.speed;
      }
      else{
          this.x += 0;
          this.y += 0;
      }
  
      //stay within the canvas
      if(this.x &lt; 0){
          this.x = 0;
      }
      if(this.x &gt;  canvas.width - 50){
          this.x = canvas.width - 50;
      }
      if(this.y &lt; 0){
          this.y = 0;
      }
      if(this.y &gt;  canvas.height - 50){
          this.y = canvas.height - 50;
      }
  
      ctx.drawImage(catI, this.x, this.y);
  };
  
  }
  
  var cat = new Cat(50, 50);
  
  document.addEventListener("keydown", function(e){
      cat.keyInput[e.keyCode] = true;
  });
  
  document.addEventListener("keyup", function(e){
      cat.keyInput[e.keyCode] = false;
  });
  
  function animate(){
      cat.display();
  }
  
  
  window.requestAnimationFrame(animate);
  </code></pre>