Set canvas element as background of a div element

Question

We can use canvas for drawing custom shapes. I need to draw my shape dynamically as a canvas item and place it for a div background item. My pages generates run time and they aren't static html code so i can't use tricky methods. What's your idea?

Regards

Answer 1

Looks like you searching for toDataURL().

UPD: Here a usage exaple:

dataUrl = your_canvas.toDataURL();
your_div.style.background='url('+dataUrl+')'

Live demo on jsFiddle

Answer 2

Sounds like you need canvas2image: https://github.com/hongru/canvas2image

You can create a canvas and then get the contents as a png:

var canvas = document.createElement("canvas");

....do stuff here...

var img = Canvas2Image.convertToPNG(canvas, canvas.width, canvas.height);

Then all you need to do is use the png as a background image:

document.body.style.background = "url(" + img.src + ")";

Please correct me if any of this is wrong.