In this recipe we will use the canvas tag to draw and animate a series of shapes. We will also loop an audio file using the audio tag to play while the animation displays. We are adapting an original animation created by Michael Nutt. We will be creating a slower, more relaxing animation that looks like waving grass.
You will need a recently updated browser, such as Firefox 3.6 or Google Chrome, and an audio file in multiple formats. It does display at a different (smaller) size in Opera browsers 9 and 10. The audio will also not play in those versions of Opera.
First, open a new HTML5 page and name it random-animation-with-audio.html. Enter the beginnings of an HTML5 page including the page title:
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8" /> <title>Canvas Reggae</title>.
Then, add links to the JavaScript and CSS files that will be imported...