CODEWITHSUNDEEP
canvassvgd3.js
user1698555
user1698555

Reputation: 77

Is there a way to add a canvas element as an image to svg

I have a jsfiddle here:

http://jsfiddle.net/Gt7wQ/

What I'm trying to do is add the temporary canvas element that I just drew onto my svg board. Is that possible?

What I'm trying to do now is:

svg.append("image")
    .attr("xlink:href", temp_canvas)
    .attr("x", 0)
    .attr("y", 0);

Thanks

Upvotes: 2

Views: 309

Answers (1)

user1693593
user1693593

Reputation:

Use the toDataURL() on your canvas element to generate a data-uri.

Also specify a width and height attribute for the d3 svg as well:

svg.append("image")
    .attr("xlink:href", temp_canvas.toDataURL())
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 300)
    .attr("height", 300);

UPDATED FIDDLE

Note that this won't work if the content on the canvas is from a source of other origin than your page (ie. image drawn to canvas which orginated from a different domain).

Upvotes: 1

Related Questions