CODEWITHSUNDEEP
javascriptcanvasgeometric-arc
DuxClarus
DuxClarus

Reputation: 159

Drawing an arc in java script but it doesn't appear

I'm working on a simple html/js project to get a box moving in a canvas that can shoot a ball. I got the box moving but I cant get the ball to appear. The program makes it to the drawBall() and moveBall()(Tested using alerts) functions but they don't do anything. I've been working on this the past hour and so and I just can't get it to work. Here's my javascript code that moves the box and should draw a ball whenever the spacebar is released.

function init() {
//canvas = document.getElementById('canvas');
context = $('#canvas')[0].getContext('2d');
WIDTH = $('#canvas').width();
HEIGHT = $('#canvas').height();
block_x = WIDTH / 2;
block_y = HEIGHT / 2;
setInterval('draw()', 25);
}

function clearCanvas() {
  context.clearRect(0,0,WIDTH,HEIGHT);
}

function draw() {
  clearCanvas();
  if(shotBall)
  {
        drawBall();
        moveBall();
  }
  if (rightKey) block_x += 5;
  else if (leftKey) block_x -= 5;
  if (upKey) block_y -= 5;
  else if (downKey) block_y += 5;
  if (block_x <= 0) block_x = 0;
  if ((block_x + block_w) >= WIDTH) block_x = WIDTH - block_w;
  if (block_y <= 0) block_y = 0;
  if ((block_y + block_h) >= HEIGHT) block_y = HEIGHT - block_h;
  context.fillRect(block_x, block_y, block_w, block_h);
 }

function drawBall() {
         context.beginPath();
     context.arc(ball_x, ball_y, ball_radius, 0, Math.PI * 2, false);
}

function moveBall() {
    ball_y += 1;
    ball_x -= 1;
}

function onKeyDown(evt) {
  if (evt.keyCode == 68) rightKey = true;
  else if (evt.keyCode == 65) leftKey = true;
  if (evt.keyCode == 87) upKey = true;
  else if (evt.keyCode == 83) downKey = true;
}

function onKeyUp(evt) {
  if (evt.keyCode == 68) rightKey = false;
  else if (evt.keyCode == 65) leftKey = false;
  if (evt.keyCode == 87) upKey = false;
  else if (evt.keyCode == 83) downKey = false;
  if(evt.keyCode == 32) createBall();
}

function createBall() 
{
        ball_x = block_x + (block_w / 2); 
        ball_y = block_y + (block_y / 2);
    radius = 20;
    shotBall = true;
}
$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);

Upvotes: 0

Views: 212

Answers (1)

me_digvijay
me_digvijay

Reputation: 5502

When I tried your code the problem that I can see is that you haven't initialized the block_w, and block_h and the ball_radius variables, because these values are seems to be undefined as I see in firebug tool.

So you have to make sure that you have defined and initialized every variable that you use. Also You have to make sure that you are calling every function that you have defined.

When I put values manually in the context.arc(23, 34, 45, 0, Math.PI*2, false); function then it works fine for me. So make sure you have defined and initialized every variable.

Upvotes: 1

Related Questions