HTML5 Canvas - Bouncing Balls

I've been taking a closer look at HTML5 recently and have been playing with the canvas feature which allows you to draw graphics on a webpage using JavaScript. I wrote a quick example showing a few balls bouncing around.

Click on the box below, to activate:

Canvas not supported.

Source Code:

<script type="text/javascript">
var width = 100;
var height = 200;

function Ball(){
    // random radius
    this.radius = Math.floor(Math.random()*(10-5+1))+5;

    // random x and y
    this.x = Math.floor(Math.random()*(width-this.radius+1))+this.radius;
    this.y = Math.floor(Math.random()*(width-this.radius+1))+this.radius;

    // random direction, +1 or -1
    this.dx = Math.floor(Math.random()*2) * 2 - 1;
    this.dy = Math.floor(Math.random()*2) * 2 - 1;

    //random colour, r, g or b
    var rcol = Math.floor(Math.random()*3);
    this.col = rcol==0 ? "red" :
               rcol==1 ? "blue" : "green";
}

// create an array of balls
numBalls = 10;
var balls = new Array(numBalls);
for(i= 0 ; i < numBalls ; i++){
   balls[i] = new Ball();
}

// draw the balls on the canvas
function draw(){
  var canvas = document.getElementById("myCanvas");

  // check if supported
  if(canvas.getContext){

    var ctx=canvas.getContext("2d");

    //clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.globalAlpha = 0.5;
    ctx.strokeStyle="black";

    // draw each ball
    for(i = 0; i < numBalls ; i++){
      var ball = balls[i];
      ctx.fillStyle=ball.col;
      ctx.beginPath();

      // check bounds
      // change direction if hitting border
      if(ball.x<=ball.radius ||
         ball.x >= (width-ball.radius)){
        ball.dx *= -1;
      }
      if(ball.y<=ball.radius ||
         ball.y >= (height-ball.radius)){
        ball.dy *= -1;
      }

      // move ball
      ball.x += ball.dx;
      ball.y += ball.dy;

      // draw it
      ctx.arc(ball.x, ball.y, ball.radius, 0, 2*Math.PI, false);
      ctx.stroke();
      ctx.fill();
    }
  }
  else{
    //canvas not supported
  }
}

// calls draw every 10 millis
function bounce(){
    setInterval(draw, 10);
}
</script>
<canvas id="myCanvas" width="100" height="200" style="border-style:solid;border-width:1px" onclick="bounce()">
Canvas not supported.</canvas>

Further Reading:
Canvas Tutorial [developer.mozilla.org]