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

Share Improve this question Follow edited Aug 8, 2018 at 8:35 Vadim Kotov 8,28488 gold badges5050 silver badges6363 bronze badges asked Oct 4, 2017 at 13:54 Logan 03Logan 03 4511 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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