1

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?

andrsnn
  • 1,591
  • 5
  • 25
  • 43

1 Answers1

1

Change it to this:

var canvas = document.getElementById("canvas");
var Cir = canvas.get(0).getContext("2d");
Siamak Motlagh
  • 5,028
  • 7
  • 41
  • 65
  • maybe something conflicting somewhere else in my code. I'll try figure it out thanks! – andrsnn May 07 '13 at 19:12
  • i cannot get the ball to render correctly without using jquery. Could you take a look? http://jsfiddle.net/Kinetic915/B77UB/1/ – andrsnn May 08 '13 at 03:14