<!-- This is the HTML5 canvas tag -->
<canvas id="canvas" width="800" height="400" style="margin: 1px; border: 1px solid #c3c3c3;">
  This is a bouncing ball sketch on a HTML5 canvas element.
</canvas>

<script>

  var width = 800;
  var height = 400;

  // Define the bouncing Ball constructor
  var Ball = function(xPos, yPos, xSpeed, ySpeed) {
    this.xPos = xPos;
    this.yPos = yPos;
    this.xSpeed = xSpeed;
    this.ySpeed = ySpeed;
  }

  // Add a couple of methods to Ball.prototype
  // Move the ball according to its speed
  Ball.prototype.bounce = function() {
    this.xPos += this.xSpeed;
    this.yPos += this.ySpeed;

    if ( this.xPos > width || this.xPos < 0 ) {
      this.xSpeed *= -1;
    }
    if (this.yPos > height || this.yPos < 0 ) {
      this.ySPeed *= -1;
    }
    console.log("I'm bouncing!");
  }

  Ball.prototype.display = function(ctx,path) {
    path.arc(this.xPos,this.yPos,10,0,Math.PI*2,true);
    ctx.strokeStyle = "#black";
    ctx.stroke(path);
  }

  // Create a Ball instance
  var ball1 = new Ball();

  // Get the canvas element.
  var canvas = document.getElementById("canvas");

  // This is the draw function.
  var draw = function() {
    if(canvas.getContext) {
      var ctx = canvas.getContext("2d");
      var path = new Path2D();
      ball1.bounce();
      ball1.display(ctx,path);
    }
  }


  // This is the draw loop.
  setInterval(function() {
    draw();
  }, 1000 / 30);
</script>

Create bouncing ball sketch 1
Create bouncing ball sketch 1
