~/piMakers/presentations/javaScript/ball.html.html

<html>
<head></head>
<body>
<canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas>

<script>
var canvas = document.getElementById('canvas');
var ct  = canvas.getContext('2d');
var raf;

// Define the Ball
var ball = {
    //x: Math.floor(Math.random()) * 250,
    //y: Math.floor(Math.random()) * 550,
    x: 200,
    y: 150,
    vx: 5,
    vy: 2,
    radius: 25,
    color: 'red',
    draw: function() {
        ct.beginPath();
        ct.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
        ct.closePath();
        ct.fillStyle = this.color;
        ct.fill();
    }
};
console.log(ball.x);

function draw() {
    // Clear the canvas
    ct.clearRect(0,0, canvas.width, canvas.height);
    // Draw the ball 
    ball.draw();
    // Move the ball a bit
    ball.x += ball.vx;
    ball.y += ball.vy;

    // Handle off canvas
    if (ball.y + ball.vy + ball.radius > canvas.height ||
            ball.y + ball.vy - ball.radius < 0) {
        ball.vy = -ball.vy;
    }
    if (ball.x + ball.vx + ball.radius > canvas.width ||
            ball.x + ball.vx - ball.radius < 0) {
        ball.vx = -ball.vx;
    }
    // Draw the frame once 
    raf = window.requestAnimationFrame(draw);
}

// Start the animation when the mouse is over
canvas.addEventListener('mouseover', function(e) {
    raf = window.requestAnimationFrame(draw);
});

// Stop the animation when the mouse is out
canvas.addEventListener('mouseout', function(e) {
    window.cancelAnimationFrame(raf);
});
// Draw the ball
ball.draw();
</script>

</body>
</html>