title: Javascript Canvas is showing nothing
body: <p>I can't find what is causing the canvas to show nothing. Please help me!</p>
  
  <p>Here is the image that shows what is happening <a href="http://imgur.com/So67XMM" rel="nofollow">http://imgur.com/So67XMM</a></p>
  
  <blockquote>
    <p>In the body tag I'm calling the function inicializar, like this: &lt;
    body onload="inicializar()"></p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  
  canvas.width = 600;
  canvas.height = 480;
  var w = canvas.width;
  var h = canvas.height;
  
  var friction = 0.98,
    alturaJogador,
    larguraJogador,
    pontosJogador,
    espaco,
    keys = [];
  
  var jogador1 = {
    x: w / 2,
    y: h / 2,
    s: 2,
    vx: 0,
    vy: 0,
    dir: 0
  };
  
  var bola = {
    x: canvas.width / 2,
    y: 250,
    d: 10,
    s: 2,
    vx: 0,
    vy: 0
  };
  
  function inicializar() {
    alturaJogador = 25;
    larguraJogador = 25;
  
    pontosJogador = 0;
  
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
  
    espaco = false;
  
    setInterval(update, 10);
  }
  
  function intersects(x1, y1, w1, h1, x2, y2, w2, h2) {
    if (w2 !== Infinity &amp;&amp; w1 !== Infinity) {
      w2 += x2;
      w1 += x1;
      if (isNaN(w1) || isNaN(w2) || x2 &gt; w1 || x1 &gt; w2) {
        return false;
      }
    }
    if (y2 !== Infinity &amp;&amp; h1 !== Infinity) {
      h2 += y2;
      h1 += y1;
      if (isNaN(h1) || isNaN(y2) || y2 &gt; h1 || y1 &gt; h2) {
        return false;
      }
    }
    return true;
  }
  
  function update() {
    if (keys[38]) {
      if (jogador1.vy &gt; -jogador1.s) {
        jogador1.vy--;
      }
    }
  
    if (keys[40]) {
      if (jogador1.vy &lt; jogador1.s) {
        jogador1.vy++;
      }
    }
    if (keys[39]) {
      if (jogador1.vx &lt; jogador1.s) {
        jogador1.vx++;
      }
    }
    if (keys[37]) {
      if (jogador1.vx &gt; -jogador1.s) {
        jogador1.vx--;
      }
    }
  
    if (keys[32]) {
      espaco = true;
    } else {
      espaco = false;
    }
  
    var vB = 10;
    var angle = Math.atan(Math.abs(jogador1.vy / jogador1.vx));
    var vBx = Math.cos(angle) * vB;
    if (jogador1.vx &lt; 0) {
      vBx *= -1;
    }
    var vBy = Math.sin(angle) * vB;
    if (jogador1.vy &lt; 0) {
      vBy *= -1;
    }
  
    jogador1.vy *= friction;
    jogador1.y += jogador1.vy / 2;
    jogador1.vx *= friction;
    jogador1.x += jogador1.vx / 2;
  
    if (jogador1.x &gt;= 575) {
      jogador1.x = 575;
    } else if (jogador1.x &lt;= 0) {
      jogador1.x = 0;
    }
  
    if (jogador1.y &gt; 455) {
      jogador1.y = 455;
    } else if (y &lt;= 0) {
      jogador1.y = 0;
    }
  
    ctx.clearRect(0, 0, 600, 480);
    ctx.beginPath();
    ctx.fillRect(jogador1.x, jogador1.y, alturaJogador, larguraJogador);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(bola.x, bola.y, bola.d, 0, Math.PI * 2, true);
    ctx.fill();
  
    ctx.font = "32pt Tahoma";
    ctx.fillText(pontosJogador, canvas.width - 70, 50);
    ctx.fillText(jogador1.vx, canvas.width - 570, 50);
    ctx.fillText(jogador1.vy, canvas.width - 570, 90);
    ctx.fillText(jogador1.dir, canvas.width - 570, 130);
  
  }
  
  update();
  
  document.body.addEventListener("keydown", function(e) {
    keys[e.keyCode] = true;
  });
  document.body.addEventListener("keyup", function(e) {
    keys[e.keyCode] = false;
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
    border: 1px solid #000000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas" width="600" height="480"&gt;
    Navegador não suporta HTML5
  &lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;head&gt;
          &lt;title&gt;Game&lt;/title&gt;
          &lt;style type="text/css"&gt;
              canvas {
                  border: 1px solid #000000;
              }
          &lt;/style&gt;
  &lt;/head&gt;
  &lt;body onload="inicializar()"&gt;
          &lt;canvas id="canvas" width="600" height="480"&gt;
              HTML5 not supported
          &lt;/canvas&gt;
  
      &lt;script type="text/javascript"&gt;
          var canvas = document.getElementById("canvas");
          var ctx = canvas.getContext("2d");
  
          canvas.width = 600;
          canvas.height = 480;
          var w = canvas.width;
          var h = canvas.height;
  
          var friction = 0.98,
              alturaJogador,
              larguraJogador,
              pontosJogador,
              espaco,
              keys = [];
  
          var jogador1 = {
              x: w / 2,
              y: h / 2,
              s: 2,
              vx: 0,
              vy: 0,
              dir: 0
          };
  
          var bola = {
              x: canvas.width / 2,
              y: 250,
              d: 10,
              s: 2,
              vx: 0,
              vy: 0
          };
  
          function inicializar() {
              alturaJogador = 25;
              larguraJogador = 25;
  
              pontosJogador = 0;
  
              canvas = document.getElementById("canvas");
              context = canvas.getContext("2d");
  
              espaco = false;
  
              setInterval(update, 10);
          }
  
          function intersects(x1, y1, w1, h1, x2, y2, w2, h2) {
                  if (w2 !== Infinity &amp;&amp; w1 !== Infinity) {
                      w2 += x2;
                      w1 += x1;
                      if (isNaN(w1) || isNaN(w2) || x2 &gt; w1 || x1 &gt; w2){
                          return false;
                      }
                  }
                  if (y2 !== Infinity &amp;&amp; h1 !== Infinity) {
                      h2 += y2;
                      h1 += y1;
                      if (isNaN(h1) || isNaN(y2) || y2 &gt; h1 || y1 &gt; h2){
                          return false;   
                      }
                  }
                  return true;
          }
  
          function update() {
              if(keys[38]) {
                  if(jogador1.vy &gt; -jogador1.s) {
                      jogador1.vy--;
                  }
              }
  
              if(keys[40]) {
                  if(jogador1.vy &lt; jogador1.s) {
                      jogador1.vy++;
                  }
              }
              if(keys[39]) {
                  if(jogador1.vx &lt; jogador1.s) {
                      jogador1.vx++;
                  }
              }
              if(keys[37]) {
                  if(jogador1.vx &gt; -jogador1.s) {
                      jogador1.vx--;
                  }
              }
  
              if(keys[32]) {
                  espaco = true;
              } else {
                  espaco = false;
              }
  
              var vB=10;
              var angle=Math.atan(Math.abs(jogador1.vy/jogador1.vx));
              var vBx = Math.cos(angle)*vB;
              if (jogador1.vx &lt; 0) {
                  vBx *= -1;
              }
              var vBy = Math.sin(angle)*vB;
              if (jogador1.vy &lt; 0) {
                  vBy *= -1;
              }
  
              jogador1.vy *= friction;
              jogador1.y += jogador1.vy /2;
              jogador1.vx *= friction;
              jogador1.x += jogador1.vx/2;
  
              if(jogador1.x &gt;= 575) {
                  jogador1.x = 575;
              } else if(jogador1.x &lt;= 0) {
                  jogador1.x = 0;
              }
  
              if(jogador1.y &gt; 455) {
                  jogador1.y = 455;
              } else if(y &lt;= 0) {
                  jogador1.y = 0;
              }
  
              ctx.clearRect(0, 0, 600, 480);
              ctx.beginPath();
              ctx.fillRect(jogador1.x, jogador1.y, alturaJogador, larguraJogador);
              ctx.fill();
              ctx.beginPath();
              ctx.arc(bola.x, bola.y, bola.d, 0, Math.PI * 2, true);
              ctx.fill();
  
              ctx.font = "32pt Tahoma";
              ctx.fillText(pontosJogador, canvas.width - 70, 50);
              ctx.fillText(jogador1.vx, canvas.width - 570, 50);
              ctx.fillText(jogador1.vy, canvas.width - 570, 90);
              ctx.fillText(jogador1.dir, canvas.width - 570, 130);
  
          }
  
          update();
  
          document.body.addEventListener("keydown", function (e) {
              keys[e.keyCode] = true;
          });
          document.body.addEventListener("keyup", function (e) {
              keys[e.keyCode] = false;
          });
      &lt;/script&gt;   
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>