CODEWITHSUNDEEP
javascripthtmlsvghtml5-canvascanvg
woggles
woggles

Reputation: 7444

Mysterious growth after copying a SVG to a canvas

I have a svg on my page that I need to export to a png, so following the advice here, I'm using canvg.

The copy seems to work fine at first but then the canvases height starts mysteriously increasing.

Am I doing something obviously wrong? I've tried setting all kinds of sizes for the canvas with no luck. Fails in IE and Chrome.

Here is my export function: 

function copytocanvas()
{
    var c = document.getElementById('canvas');
    c.width = $('#svgChart').width();
    c.height = c.width;
    c.getContext = document.getElementById('canvas').getContext;


    var svg = document.getElementById('svgChart'); // or whatever you call it
    var serializer = new XMLSerializer();
    var str = serializer.serializeToString(svg);

    canvg(c, str);  
}

Here is a jsfiddle to show the problem: http://jsfiddle.net/LkqTU/4772/

The problem seems to get worse when scrolling!

Upvotes: 2

Views: 427

Answers (1)

Shmiddty
Shmiddty

Reputation: 13967

Try this:

canvg(c, str, {ignoreMouse:true, ignoreDimensions:true});

edit:

It looks like you don't need to ignoreMouse:

canvg(c, str, {ignoreDimensions:true}); should do the trick.

Upvotes: 2

Related Questions