HTML5 Canvas Demo Bouncing Ball Example

Besides tutorials web developers can also learn HTML5 with HTML5 examples.
Here is an HTML5 Canvas demo for web programmers using HTML5 canvas element and programming with Javascript.

This HTML5 example shows how to use javascript to draw bouncing ball within canvas element borders, how to animate bouncing ball within canvas element with time periods defined using Javascript setInterval() function.

Besides drawing on HTML page using canvas element and Javascript programming, the boing sound effect that happens when ball hits the canvas borders is played by using the HTML5 Audio element.

HTML5 Canvas demo example showing how to program bouncing ball in canvas element

First of all, place the below HTML5 canvas element in your HTML web page codes.


<canvas id="html5canvas">

Your browser does not support HTML5 Canvas element

</canvas>

Code

After you create Canvas element in HTML codes, add the below required Javascript codes for HTML5 Canvas demo with bouncing ball example.


<script>
var x = 20;

var y = 20;

var r = 10; // ball radius

var dx = 0.5; // x-axis delta per movement

var dy = 0.5; // y-axis delta per movement

var WIDTH = 590; // Canvas width

var HEIGHT = 250; // Canvas heigt

var speed = 1; // time interval in millisec



var canvas = document.getElementById("html5Canvas");

canvas.width = WIDTH;

canvas.height = HEIGHT;



if (canvas.getContext("2d")) {

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

 init();

}

function init() {

 return setInterval(draw, speed);

}

function drawCircle(x, y, r) {

 context.clearRect(0, 0, WIDTH, HEIGHT);

 context.beginPath();

 context.arc(x, y, r, 0, Math.PI * 2, false);

 context.closePath();

 context.fillStyle = "#1122AA";

 context.fill();

}

function draw() {

 drawCircle(x, y, r);



 if (x + r + dx > WIDTH || x - r + dx < 0) {

  boing();

  dx = -dx;

 }

 if (y + r + dy > HEIGHT || y - r + dy < 0) {

  boing();

  dy = -dy;

 }



 x += dx;

 y += dy;

}

function boing() {

 var audio = new Audio();



 if (audio.canPlayType("audio/mp3")) {

  audio.src = "/html5/boing-sound-in-mp3-format.mp3";

 }

 else if (audio.canPlayType("audio/wav")) {

  audio.src = "/html5/boing-sound-in-wav-format.wav";

 }

 // else if (audio.canPlayType("audio/ogg")) {

 // audio.src = "newsound.mp3";

 // }



 audio.play();

}

</script>

Code

Please note that when defined time period is completed the setInterval() javascript function calls the draw() function.
Draw javascript function first clears canvas element drawing area using context object clearRect() method.
After clearing canvas element drawing space, a new circle with inside filled with color is drawn using drawCircle() function.
As javascript programmers will realize, for creating bouncing ball animation on HTML5 Canvas element, we have to draw the ball each time at time interval is completed.

New position of the ball in canvas after time interval is completed is calculated by adding delta-x and delta-y movement amounts to the current position (x,y) of the ball on canvas. If the ball hits the canvas element borders, the delta-x or delta-y position change amount is reversed in direction by multiplying it with -1. This delta position changes are kept same until the ball hits the canvas borders next time.

I used the HTML5 audio element for playing bounce effect on HTML page.
I create audio element dynamically using Javascript. But since not all web browsers support all audio file formats, I first checked whether the web browser can play a specific sound file format. If browser supports audio tag with .mp3 file format, I play the file. If web browser does not support HTML5 audio with .mp3 format, I check if it can play .wav format. And so on.
In order to check if web browser is capable of playing audio file format, I use audio object canPlayType() method which returns true or false.