The landscape of web development is extremely volatile, changing not only from year to year, but sometimes even day to day. The existence of tools such as http://caniuse.com/ should be enough to prove that.
With everyday life, I don't always get the opportunity to play with emergent technologies. However, that does not mean I never get to.
After some consideration, I imagined a grid with optional borders containing translucent cells fading in and out. I assumed that canvas would have a simple way of supporting alpha transparency and drawing rectangles, at least. I wasn't too far off.
Surprises Along the Way
Having never worked with a drawing API before, I wasn't exactly sure of what to expect. My hope was that canvas could be picked up easily since most web technologies appear to aim for simplicity. (Admittedly whether they actually succeed or not can be debated.)
For the most part this is true, however I did come across a few concepts that I originally had not considered but do make sense.
The Default Canvas Background is Transparent
The Canvas Size and the Size of the Drawable Canvas Can Be Different
Setting a canvas's size through the height and width attributes sets the size of the drawing area, however the canvas can be resized arbitrarily through CSS. This can have the effect of a blurry zoom or stretching out the drawing if the aspect ratio is not preserved.
Setting the Canvas Size Clears the Canvas
This is well documented and a nice shortcut to wipe your canvas state if you need to.
Drawing to a Canvas Does not Replace Previous Content
This also makes sense, but I had to get accustomed to the concept that anything I wanted to replace required a call to context.clearRect() (for my specific uses), especially since everything I drew was translucent by default. Before I realized this, the gridfader cells would fade in too opaquely.
Canvas Does Not Natively Support the Concept of Layers...
...nor can you use multiple contexts per canvas. If you want more than one context, you require more than one canvas. While layers are not natively supported, one could emulate the concept of layers in their own code through ordered drawing and tracking object state or layer canvas elements utilizing CSS.
Canvas Does Not Provide New Timing APIs
My naive hope was that HTML5 canvas would provide better timing methods to create animations. Unfortunately, window.setTimeout() and window.setInterval() are all that still exist.
Tracking Canvas State Using Objects