Bind child elements to parent element

Question

I'm working on writing a simple export function for an HTML5 canvas object. I create the id='infovis-canvaswidget' which contains the actual drawing. The child elements are all of the labels for that drawing. I'm able to grab the canvas element by using the following:

var ele  = document.getElementById("infovis-canvas");
var dataUrl = ele.toDataURL("image/png");
window.open(dataUrl, "toDataURL() image", "width=500, height=500");

However, that does not output the label elements. Please see the attached screenshot to understand the DOM organization. Is there any way to bind the child elements to the 'infovis-canvaswidget' so those get exported too?

Answer 1

I'm sorry to say this as it looks like you've put in a fair amount of effort into this, but you simply can't get image data for pure DOM elements, not directly anyway.

It doesn't mean you're out of options though. As far as I can see you have two options, though both involve getting your labels onto the canvas so they're really just two approaches with the same goal.

Your first option is to change the functionality of your project—probably radically so this may be a pain—so that your labels are rendered directly onto the canvas. This way, when you get image data from the canvas your labels will already be there.

Your second option is to somehow convert your DOM elements to objects to draw on the canvas when you want to get image data. The html2canvas project is something you might want to look at, as it implements this technique and may help you out.

Good luck!