Time for action – creating a basic background for the music game

First, we will draw a few paths in the Canvas as the background of the music playback.

1. We will continue working with our example and draw the background. Open the index.html file in a text editor and add the following highlighted code that defines the game scene with two Canvases set up:

   <div id="game">
     <div id="menu-scene" class="scene">
       <a href="#game"><span>Play</span></a>
     </div>
   
     <div id="game-scene" class="scene">
       <canvas id="game-canvas" width="320" height="440">
         This is an interactive audio game with some music notes moving from top to bottom.
       </canvas>
     </div>
   </div>

2. We added a game scene in the HTML file. We want to put it on top of the menu scene, so we style the game scene to have an absolute position by adding the following to audiogame.css:

   #game {
     position: relative;
     width: 320px;
     height: 440px;
     overflow: hidden...