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><head><meta charset=UTF-8><title>CH5EX9: Moving In Circle</title><script src=modernizr.js></script><script type=text/javascript>window.addEventListener('load', eventWindowLoaded, false);  function eventWindowLoaded() {    canvasApp();}function canvasApp() {    var radius = 100;    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></head><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>
Efficiency of moving ball
javascript;optimization