I have a problem with export fabric's canvas to url.

How can I export all content with imes from canvas to url? Because for now, I can see that only red background has been exported.

Here's my fiddle : /

<div id="custom-label" style="position: absolute; right: 0px; top: 50px; z-index:10; width: 512px; height: 256px; border: 1px solid #7d8d20">
  <canvas id="draw-area" width="512" height="256" style=""></canvas>
</div>

I have a problem with export fabric's canvas to url.

How can I export all content with imes from canvas to url? Because for now, I can see that only red background has been exported.

Here's my fiddle : https://jsfiddle/y7pu4wn3/13/

<div id="custom-label" style="position: absolute; right: 0px; top: 50px; z-index:10; width: 512px; height: 256px; border: 1px solid #7d8d20">
  <canvas id="draw-area" width="512" height="256" style=""></canvas>
</div>

• javascript
• html
• html5-canvas
• fabricjs

1 Answer 1

Your result is correct. You are getting canvas data before image is loaded. Loading images are async. If you will do like this (using your fiddle):

fabric.Image.fromURL(imageObj.src, function(myImg) {
                canvas.add(myImg); 

                var pngURL = canvas.toDataURL();
                console.log(pngURL);

                $('#placeHolder').html('<img src="'+pngURL+'"/>');

              });

It will not work because, image is from different domain. If your actual project has images on the same domain you can try code above. If it is from different domain, so it will be more plicated to do then your logic