Splitting canvas app into separate functions

From a Code Review perspective, what you are asking for, is worse.

Currently, you only need to call canvasApp() and that function does all the work. Inside you have drawScreen which is periodically called, starting in gameLoop.

Still,

• I would put all the var statements on top for readability
• I would put var in front of context and theCanvas (!)
• I would assign your colors ('#EEEEEE') to meaningfully named variables
• I would assign Math.PI*2 to a var doublePi = Math.PI*2 for speed
• I would consider dropping the curly braces from the guard clause
• //Box is not really a meaningful naming, //border and //background would make more sense`

That would give this:

function canvasApp() {

    if (!canvasSupport())
      return;

    var canvas = document.getElementById('canvasOne'),
        context = canvas.getContext('2d'), 
        borderColor = '#EEEEEE',
        backgroundColor = '#000000',
        ballColor = '#000000',
        speed = 5,
        y = 10,
        x = 250,
        doublePi = Math.PI*2,
        ballSize = 15,
        refreshInterval = 20; //In milliseconds

    function  drawScreen () {
        //Background + Border
        context.fillStyle = borderColor;
        context.fillRect(0, 0, canvas.width, canvas.height);
        //Background
        context.strokeStyle = backgroundColor; 
        context.strokeRect(1,  1, canvas.width-2, canvas.height-2);
        // Create ball
        y += speed;
        context.fillStyle = ballColor;
        context.beginPath();
        context.arc(x,y,ballSize,0,doublePi,true);
        context.closePath();
        context.fill();
    }

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

    gameLoop();
}

I am still not too excited by redrawing every 20 milliseconds 2 large boxes, but I will leave the research on further optimization to you.

Update: after playing the code and reading it more closely, the code only redraws a square once, and then the border, so that should be fine.

A working jsbin version is here: the animation is fast enough, though disappointing as there is no bouncing.. http://jsbin.com/lidil/2