title: created a simple BREAKOUT game with jquery, attempting to convert back to plain javascript
body: <p>I created breakout using some jquery and a handy tutorial online.</p>
  
  <p>Here is the fiddle: <a href="http://jsfiddle.net/Kinetic915/9bLEk/6/" rel="nofollow">http://jsfiddle.net/Kinetic915/9bLEk/6/</a></p>
  
  <p>I successfully changed the WIDTH and HEIGHT accessing the window size like this:</p>
  
  <p>From:</p>
  
  <pre><code>WIDTH = $("#canvas")[0].width = $(window).width();
  HEIGHT = $("#canvas")[0].height = $(window).height();
  </code></pre>
  
  <p>To:</p>
  
  <pre><code>var WIDTH  = document.getElementById("canvas");
  var HEIGHT  = document.getElementById("canvas");
  
  WIDTH.width = window.innerWidth;
  HEIGHT.height = window.innerHeight;
  WIDTH = window.innerWidth;
  HEIGHT = window.innerHeight;
  </code></pre>
  
  <p>the code loads properly. I am finding a problem changing the code that renders the ball.<br>
  It works with jquery here:</p>
  
  <pre><code>Cir = $('#canvas')[0].getContext("2d");
  
  Cir.beginPath();
  Cir.arc(x, y, 10, 0, Math.PI * 2, true);
  Cir.closePath();
  Cir.fill();
  </code></pre>
  
  <p>Does not work with:</p>
  
  <pre><code>var canvas = document.getElementById("canvas");
  var Cir = canvas.getContext("2d");
  
  Cir.beginPath();
  Cir.arc(x, y, 10, 0, Math.PI * 2, true);
  Cir.closePath();
  Cir.fill();
  </code></pre>
  
  <p>any suggestions?  </p>