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;
}

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;
}

• javascript
• html
• canvas

3 Answers 3

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

Overlaying a canvas is how this bookmarklet works.

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 mands 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.

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./tags/tryit.asp?filename=tryhtml5_canvas