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.

&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;CH5EX9: Moving In Circle&lt;/title&gt;
&lt;script src="modernizr.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
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();
}

&lt;/script&gt;

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

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 radius = 100;
    var circle = {
        centerX: 250,
        centerY: 250,
        radius: 30,
        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
    }());
}

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