I'm not sure the best way to find a good step by step example of a UI rendered completely using canvas, but the best references you'll probably find is Mozilla's, or barring that, their actual tutorial
As far as using layered, non-rectangular canvases, you might find a variety of implementation issues there, and you're kind of asking for implementation of a system that was not meant to be used in such a way. To put it simply: you're asking to cram a round peg in a square hole.
From a semantic point of view, the canvas is potentially an invisible block container, so anything you draw in the canvas can hint at a non-rectangular view if you scale the container correctly. If you want to imitate the way full-screen flash sites work, you can actually have your entire view rendered in one large scalable canvas, which while rectangular would only really limit you to the square shape of the browser window.
If you want to use a variety of canvases for individual elements, you can still layer them on top of each other, but your best bet is to make sure those views do not interfere with each other.
My next bit of advice is to check out Processing.js to get a feel for libraries that allow you to automate some of the drawing, animation, and interactivity of elements dynamically rendered in the canvas object.
I hope that helps! If you have other specific questions, like how to make a certain popup or element appear in your site the way you want, feel free to come back and ask that.