I wrote this javascript to increase canvas size by 1 pixel whenever the ball hit the border. However, the whole canvas will blink when the size is changed. Don't know what causes this problem. Is there any way to fix?

```
function testWalls() {
    var ball;
    var testBall;

    for (var i =0; i <balls.length; i++) {
        ball = balls[i];

        if (ball.nextX+ball.radius > theCanvas.width) {
            ball.velocityX = ball.velocityX*-1;
            ball.nextX = theCanvas.width - ball.radius;
            theCanvas.width++;
            drawScreen();

        } else if (ball.nextX-ball.radius < 0 ) {
            ball.velocityX = ball.velocityX*-1;
            ball.nextX =  ball.radius;

        } else if (ball.nextY+ball.radius > theCanvas.height ) {
            ball.velocityY = ball.velocityY*-1;
            ball.nextY = theCanvas.height - ball.radius;
            theCanvas.height++;
            drawScreen();

        } else if(ball.nextY-ball.radius < 0) {
            ball.velocityY = ball.velocityY*-1;
            ball.nextY =  ball.radius;
        }

    }

}

```

a demo can be found here
<http://converteveryunit.com/pot/demo3.html>