Can canvas tag be used to draw on top of other items on a page?

Question

Can an HTML canvas tag be positioned over other html content on a page? For example, will something the following CSS declaration make a canvas tag do what I expect it to?

canvas.mycanvas {
  position: absolute;
  background: transparent;
  z-index: 10;
  top: 10px; left: 10px;
}

Answer 1

That should work perfectly. There's no need to set the background to 'transparent' though.

Overlaying a canvas is how this bookmarklet works.

Answer 2

Yes, this works fine in canvas-supporting browsers, and furthermore works equally as well in IE6 and IE7 using the exCanvas project which translate canvas commands into Microsoft's XML-based vector language, VML.

One thing I noticed when attempting to overlay canvas elements across-browsers is that you have to be especially careful with the order in which you append and subsequently access any canvas child DOM nodes. IE needs the item to be appended before you can work with it.