Changing my Jquery project to plain javascript -

i created breakout game school project using jquery , helpful online tutorial.

the working fiddle here: http://jsfiddle.net/kinetic915/kurvf/

edit revised fiddle: http://jsfiddle.net/kinetic915/nvctr/

i have changed javascript having problems changing jquery code renders ball javascript.

i have marked , left spaces in areas there problems.

thank given!!

//***********************************************************************************  //                     start code  //***********************************************************************************  // variables , other initializing functions here    function start() {  //****************************************************************************** //jquery // here main problem!!!!!!  // here main problem!!!!!!  cir = $('#canvas')[0].getcontext("2d"); //jquery  //changing cir = canvas.getcontext("2d"); causes code fail.   return setinterval(drawcircle, 10);  }   function windowsize() {       //success javascript        width.width = window.innerwidth;      height.height = window.innerheight;      width = window.innerwidth;      height = window.innerheight;   //previous jquery:      // width = $("#canvas")[0].width = $(window).width();      //  height = $("#canvas")[0].height = $(window).height();   }   windowsize();   var x = width / 2 - 30; //divide 2 start in middle of window  var y = height / 2;   //this draws circle    function circle() {      //cir.clearrect(0, 0, width, height);      cir.beginpath();      cir.arc(x, y, 10, 0, math.pi * 2, true);      cir.closepath();      cir.fill();  }   // initialization of block array, rendering of gutter area , coordinate box   here    //********************************************************* // here code renders ball movement etc.    //draw circle  function drawcircle() {      clear();      circle();       drawpaddle();  //calls draw paddle function      drawgutter();  // calls draw gutter function      drawcoorbox();  // calls draw coordinate box function      drawbricks();  //calls function draw boxes   //have hit brick?  rowheight = brickheight + padding;  colwidth = brickwidth + padding;  row = math.floor(y / rowheight);  col = math.floor(x / colwidth);  //if so, reverse ball , mark brick broken  if (y < numrows * rowheight && row >= 0 && col >= 0 && bricks[row][col] == 1) {      dy = -dy;      bricks[row][col] = 0;  }   if (x + dx > width || x + dx < 0) dx = -dx;   if (y + dy < 0) dy = -dy;  else if (y + dy > ((height - paddleh) - ppoffset) || y + dy > height) {      if (x > paddlex && x < paddlex + paddlew)      //switch! once first true, second goes      dy = -dy;      else if (y + dy > ((height - paddleh) - ppoffset) && y + dy > height) {          clearinterval(intervalid);      }     }   x += dx;  y += dy;  if (rightpress) paddlex += 5;  else if (leftpress) paddlex -= 5;  }     function clear() {  cir.clearrect(0, 0, width, height); //is jquery? suspect part of code making circle rendering fail.  }   start();  init_paddle();  initbricks(); 

ages ago wrote similar code in pure javascript here code uses pure javascript , no library.the code commented(i think :))

i attached events this

document.onkeydown = function(e)         {             e = e || window.event;              switch (e.keycode) { // key pressed?                                case 32: // release ball.                 if(!game.ball.isfree)                 {                     game.ball.isfree = true;                     game.ball.directionx = game.ball.directiony = 1;                     game.ball.x = game.ball.offsetleft;                                      game.ball.y =   game.screen.offsetheight - game.ball.offsettop;                 }                     break;                  case 37: // left, rotate player left                     game.bar.direction = -1;                     break;                  case 39: // right, rotate player right                     game.bar.direction = 1;                     break;             }         }          document.onkeyup = function(e)         {             e = e || window.event;              switch (e.keycode)              {                                    case 37:                 case 39:                     game.bar.direction = 0;                     break;             }         }     },    

ofcourse have many other places might need porting helpful break down of questions easier answer :)

hope helps