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

You might find this helpful: http://stackoverflow.com/questions/2719668/an-html5-canvas-element-in-the-background-of-my-page — Vimal Stan, Apr 15 '13 at 08:54

Arthur Halma · Accepted Answer · 2013-04-15T09:56:33.910

11

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

edited Apr 15 '13 at 09:56

answered Apr 15 '13 at 09:02

Arthur Halma

3,943
3
23
44

Thank you for your reply , how should i use this? – Saman Gholami Apr 15 '13 at 09:05
Provide us with your HTML/JS. Or you want I wrote new page for you? – Arthur Halma Apr 15 '13 at 09:07
Could you make a sample please? – Saman Gholami Apr 15 '13 at 09:25
What if I want canvas animation as a background? That's now just one image. – Mulperi Jul 22 '18 at 12:38

score 1 · Answer 2 · answered Apr 15 '13 at 09:55

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.

Set canvas element as background of a div element

2 Answers2

Linked