Can I use the canvas tag to draw on top of other elements on the page?

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

canvas.mycanvas { position: absolute; background: transparent; z-index: 10; top: 10px; left: 10px; } 
+4
source share
3 answers

Yes, this works fine in browsers that support canvas, and also works the same in IE6 and IE7 using the exCanvas project, which translates canvas commands into the Microsoft XML, VML vector language.

One thing I noticed when trying to overlay canvas elements in all browsers is that you should be especially careful with the order in which you add and subsequently access any child DOM nodes of the canvas. IE needs to add the item you need to add before you can work with it.

+2
source

This should work just fine. There is no need to set the background to transparent.

Overlay the canvas on how this bookmarklet works.

+5
source

You tried? this does not work? I would say that the canvas tag will act like any other tag and be located aproprietly. if you need an easy way to check it in firefox go here http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas

+1
source

All Articles