Use <canvas> as a CSS background

Question

I haven't got a practical use for this, I was just wondering if it is possible.

Can I use the canvas element as a css background?

Answer 1

Short and easy answer is no, you can't. You can not have any element as a CSS background property. Of course you can put another block, transparent, over the canvas, making it look like a background of that element.

Answer 2

You mean something like the background on this two pages?

squaredesign.com or paulirish.com

Answer 3

I think the closest you could get is to render into a canvas, call toDataUrl() on it to retrieve the contents as an image, and assignment that result to the desired element's background-image property. This will only give a static background, though. If you want to be able to further update the canvas, however, then you'll need to instead position the canvas behind another element, as Johan has already suggested.

Answer 4

You can't directly use a canvas as a CSS background image, but you could create a window sized, absolutely positioned canvas and give it a very low z-index to ensure it stays behind all the other content.