0

I've written code in HTML5 canvas where a ball drops from my cursor location no matter where I move it. Whenever I move it, it refreshes, and drops again from that location.

I'd like a new ball to appear every time I click the mouse, so that if I've clicked a few times, there are multiple balls that have been dropped. How would I go about doing this?

I know I need to utilize the eventlistener for click somehow, but in my attempts, nothing has worked. Any advice would be appreciated.

Here is the code:

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");


var W = window.innerWidth,
    H = window.innerHeight;
var running = false;

canvas.height = H; canvas.width = W;


var ball = {},
    gravity = .5,
    bounceFactor = .7;

ball = {
  x: W,
  y: H,

radius: 20,
color: "WHITE",


vx: 0,
vy: 1,

draw: function() {

    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.closePath();
  }
};


function clearCanvas() {
  ctx.clearRect(0, 0, W, H);
}

function update() {
  clearCanvas();
  ball.draw();

ball.y += ball.vy;

ball.vy += gravity;
if(ball.y + ball.radius > H) {
    ball.y = H - ball.radius;
    ball.vy *= -bounceFactor;
  }
}


canvas.addEventListener("mousemove", function(e){
    ball.x = e.clientX;
    ball.y = e.clientY;
    ball.draw();
});
  setInterval(update, 1000/60);

ball.draw();
Opal
  • 81,889
  • 28
  • 189
  • 210
guarrana
  • 79
  • 1
  • 12

1 Answers1

0

Seems to be a duplication of How do I add a simple onClick event handler to a canvas element?

Anyway, you can use the click event:

canvas.addEventListener('click', function(event) {
    ...
});
Community
  • 1
  • 1
Oleksii Markhovskyi
  • 301
  • 1
  • 2
  • 13
  • I am aware of the click event. As I said in my post, I have tried it and cannot get it create a new ball. That is my question, how do I get it to draw a NEW ball everytime I click? – guarrana May 31 '15 at 18:42
  • Could you please be more specific explaining what exactly didn't work. Have you tried to set a breakpoint into a `click` handler and observe an `event` received? – Oleksii Markhovskyi Jun 01 '15 at 17:02
  • What happens if you subscribe to `keydown` event? – Oleksii Markhovskyi Jun 01 '15 at 17:03