created a simple BREAKOUT game with jquery, attempting to convert back to plain javascript

Question

I created breakout using some jquery and a handy tutorial online.

Here is the fiddle: http://jsfiddle.net/Kinetic915/9bLEk/6/

I successfully changed the WIDTH and HEIGHT accessing the window size like this:

From:

WIDTH = $("#canvas")[0].width = $(window).width();
HEIGHT = $("#canvas")[0].height = $(window).height();

To:

var WIDTH  = document.getElementById("canvas");
var HEIGHT  = document.getElementById("canvas");

WIDTH.width = window.innerWidth;
HEIGHT.height = window.innerHeight;
WIDTH = window.innerWidth;
HEIGHT = window.innerHeight;

the code loads properly. I am finding a problem changing the code that renders the ball.
It works with jquery here:

Cir = $('#canvas')[0].getContext("2d");

Cir.beginPath();
Cir.arc(x, y, 10, 0, Math.PI * 2, true);
Cir.closePath();
Cir.fill();

Does not work with:

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();

any suggestions?

Answer 1

Change it to this:

var canvas = document.getElementById("canvas");
var Cir = canvas.get(0).getContext("2d");