Stacking graphical layers
Before we can do any real animations on our canvas we really need to rethink the concept of building everything on one canvas layer. Once a canvas element is drawn, it's incredibly hard to create subtle small changes to it, such as fade-ins for specific elements. We will revisit one of our famous charts, the bar chart, which we played around with and enhanced many times throughout the earlier chapters. In this chapter, our goal will be to break the logic apart and make it more modular. In this recipe we will separate layers. Each layer will give us more control later when we are ready to animate.
Getting ready
Start by grabbing the latest files from the previous chapter: 05.02.line-revisit.html and 05.02.line-revisit.js.
How to do it...
The following changes are made to the HTML file:
Update the HTML file to incorporate more canvas elements (one per drawn line):
<body onLoad="init();" style="background:#fafafa"> <h1>Users Changed between within a year...
