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

have you tried it? is it not working? i would say that the canvas tag would act as any other tag and be positioned aproprietly. if you want an easy way to test it in firefox, go here http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas

Answer 3

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.

Answer 4

i do not know cuzz its confuzing and boring and effin LAME! =.= Pce out.