Bouncing ball in JavaScript

I have been using this code for a while for a project at work. Actually I got it from a friends who got it from a book. But either way it worked for my demonstration.

But the other night I decided to sit down and see if I could make it into all functions and then to see about moving the variables up to the top of each function. It would be normal for simple programming and everything should work, but when I did this, the code crashed and burned (didn't show anything in the canvas). It should show bouncing balls.

Bounding Balls

window.addEventListener('load', eventWindowLoaded, false);

function eventWindowLoaded() {
    canvasApp();    
}

function canvasSupport () {
    return Modernizr.canvas;
}

function canvasApp() {
  if (!canvasSupport()) {
             return;
  }

  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);
        //Place balls

        context.fillStyle = "#00AA00";
        var ball;//object

        for (var i =0; i  theCanvas.width || ball.x  theCanvas.height || ball.y 

 

    
    
        Your browser does not support the HTML 5 Canvas. 
        
    

The code is similar to another post which I posted but in this cases I was wondering why these two lines of code could not be moved to the top of the function.

Code here that does not seem to work at the top of the function.

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

My canvas will not see any of the code that is drawn two it if this code is at the top of the function.

How can this become more efficient?

I don't see any problem when I move the two lines you mentioned to an earlier position (directly after the check for canvas support).

-
You need to clean up the indention.

-
Use one var statement with the variables separater with commas instead of multiple statements.

-
No need to prefix all those variables with temp.... Also declare them inside the loop. That makes it clear that you only are using them in there.

-
Your code to generate random integers between two limits is wrong. tempRadius will be between 5 and 12, but the maxSize is 8.

-
tempX/tempY calculation adds 2*tempRadius, but then you subtract it again, so it has no effect. This is basiclly the same mistake as with the calculation of the radius (see next point). Also it seems to be the attempt to have the balls bounce when their size touch the walls instead of their center, but you fail to include this when calculating the bouncing.

-
Considering both your attempts to get a random integer between to limits are wrong, you should write a simple function that does that (correctly). Test it.

-
Apropos bouncing: The balls don't bounce off the walls any way. Currently they bounce when they happen to have passed the wall.

-
There is no need to floor tempAngle.

-
You can simplify the calculation of tempRadians to tempRadians = Math.random() 2 Math.PI .

-
There is no need to recalculate xunits/yunits of the ball from the angle. When a ball bounces off the left or right walls, then ball.xunits simply becomes -ball.xunits. (Equivalently the top and bottom walls and yunit)

-
You should use a module pattern to wrap your code, so you don't need to use global variables (`context´).

EDIT: Here's my version: http://jsfiddle.net/jjM3V/ (Not quite perfect, as it has some duplicate code in the bounce calculation, that I don't like).

StackExchange Code Review Q#45892, answer score: 2