FabricJS: Adding SVG to canvas but invisible on export

Question

I'm trying to add an SVG to a canvas object with FabricJS and then exporting it to a data url image to let the user save the image, the arrow is shown in the canvas but when I call the toDataURL method and checking the image, it is just an empty image. I also checked the toSVG() method to check if the sag is there but it isn't in the exported SVG.

I've created a fiddle to demonstrate this.

In the example the arrow is shown when the button is clicked and I call canvas.toDataURL() and checked it in my browser and that shows an empty image. Calling canvas.toSVG() also returns an SVG without the arrow svg as seen in the fiddle.

Could somebody point me in the right direction?

Thanks in advance!

Answer 1

You need to put the calls in the callback otherwise they occur before the data has loaded eg

  fabric.loadSVGFromString(svgString, function(results, options) {
    var arrow = results[0];
    canvas.add(arrow);
    console.log(canvas.toDataURL());
    console.log(canvas.toSVG()); 
  });

Or as a fiddle