The difficulty with canvas is that it can't really be dropped in to a site in the same way. A site that makes use of slides and fades using a JS library could patch the library to use transitions instead with only a few lines of code (well a few hundred perhaps). Using canvas requires dropping the accessibility benefits as well as having to replicate all the elements manually on canvas.

I agree though, this contrived example would surely work better with canvas.

I actually want to know more about SVG than canvas. Since SVG already has the concept of translate, scale, ect... built in, are these hardware accelerated like CSS3 animations for DOM nodes?

agreed, canvas will probably perform better because it is made for animations where as DOM was not made with animation in mind. Plus canvas animations are, in some cases, hardware accelerated i believe?