# Efficiency of moving ball

Here is another example of a moving ball. I would like to see how to make it more efficient and better. I think that moving the variables to the top of the function would be better but then I tried this and it would not work as good as it did.

<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>CH5EX9: Moving In Circle</title>
<script src="modernizr.js"></script>
<script type="text/javascript">
canvasApp();

}

function canvasApp() {
var circle = {centerX:250, centerY:250, radius:125, angle:0}
var ball = {x:0, y:0,speed:.1};

theCanvas = document.getElementById('canvasOne');
context = theCanvas.getContext('2d');

function  drawScreen () {

context.fillStyle = '#EEEEEE';
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
//Box
context.strokeStyle = '#000000';
context.strokeRect(1,  1, theCanvas.width-2, theCanvas.height-2);

ball.x = circle.centerX + Math.cos(circle.angle) * circle.radius;
ball.y = circle.centerY + Math.sin(circle.angle) * circle.radius;

circle.angle += ball.speed;

context.fillStyle = "#000000";
context.beginPath();
context.arc(ball.x,ball.y,15,0,Math.PI*2,true);
context.closePath();
context.fill();
}

function gameLoop() {
window.setTimeout(gameLoop, 20);
drawScreen()
}

gameLoop();
}

</script>

<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="500">
Your browser does not support the HTML 5 Canvas.
</canvas>
</div>
</body>
</html>

• Please make sure your code works before having it reviewed. If it does not work, head over to StackOverflow Commented Apr 2, 2014 at 6:58
• It does work on this code I tried it Commented Apr 2, 2014 at 12:50
• In my mind, you are duping your questions, the changes in code are minimal between your 3 versions of the dropping ball. Commented Apr 2, 2014 at 15:43

### Handlers

Unless your handlers are called somewhere else, you can just embed them

window.addEventListener('load', function () {
canvasApp();
});


### requestAnimationFrame

There's this timer function called requestAnimationFrame that is better than setTimeout and setInterval. It's more optimized for animations, aiming 60fps when possible. But it's prefixed in other browsers, check for compatibility first.

(function gameLoop() {
window.requestAnimationFrame(gameLoop);
drawScreen();
// All other loop functions here
}());


### Common gotchas in JS

• Never forget semi-colons, even when JS allows you to forget them.
• Remember using var when declaring variables. Unless you have them in some upper scope, if you forget them, they automatically become globals - and that's bad practice.

### Conclusion

There was little to go by, but here's what I got

function canvasApp() {
var circle = {
centerX: 250,
centerY: 250,
angle: 0
}
var ball = {
x: 0,
y: 0,
speed: .1
};

var theCanvas = document.getElementById('canvasOne');
var context = theCanvas.getContext('2d');

function drawScreen() {

context.fillStyle = '#EEEEEE';
context.fillRect(0, 0, theCanvas.width, theCanvas.height);

//Box
context.strokeStyle = '#000000';
context.strokeRect(1, 1, theCanvas.width - 2, theCanvas.height - 2);

ball.x = circle.centerX + Math.cos(circle.angle) * circle.radius;
ball.y = circle.centerY + Math.sin(circle.angle) * circle.radius;

circle.angle += ball.speed;

context.fillStyle = "#000000";
context.beginPath();
context.arc(ball.x, ball.y, 15, 0, Math.PI * 2, true);
context.closePath();
context.fill();
}

(function gameLoop() {
window.requestAnimationFrame(gameLoop);
drawScreen();
// All other loop functions here
}());
}