title: How to set the background image of FabricJS canvas to image from a web service?
body: <p>I have following piece of code, which is executed when the user presses a button. It</p>
  
  <ol>
  <li>connects to a web service,</li>
  <li>gets an image from it,</li>
  <li>stores it in <code>myDataURL</code> variable and</li>
  <li>displays it on the canvas.</li>
  </ol>
  
  <p>Here's the code:</p>
  
  <pre><code>function downloadButtonPressed() {
      var username = $("input#username").val();
      var password = $("input#password").val();
      $.ajax({
          type: "GET",
          url: "http://myserver/myapp/map",
          headers: {
              "Authorization": "Basic " + btoa(username + ":" + password),
            },
          crossDomain: true,
          xhrFields: {
                  withCredentials: true
              },
          success: function (data, status, xhr) {
              alert("success");
          }
      }).fail(function ($xhr) {
          console.log("response: " + $xhr);
          var myDataURL = "data:image/png;base64," + $xhr.responseText;
          var canvas = document.getElementById('canvas');
          var context = canvas.getContext('2d');
          var img = new Image();
          img.onload = function() {
              context.drawImage(this, 0, 0, canvas.width, canvas.height);
          };
          img.src = myDataURL;
      });
  }
  </code></pre>
  
  <p>And here's what the browser window looks like, after I press the download button:</p>
  
  <p><a href="https://i.stack.imgur.com/sA0Vu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sA0Vu.png" alt="Screenshot"></a></p>
  
  <p>Now I want to make that image a backgrond image of the canvas, so that I can add other objects (e. g. rectagles, other images) on top of it.</p>
  
  <p>How can I do it?</p>
  
  <p>The official <a href="http://fabricjs.com/fabric-intro-part-4/" rel="nofollow noreferrer">FabricJS tutorial</a> recommends this:</p>
  
  <pre><code>var myDataURL = "data:image/png;base64," + $xhr.responseText;
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var img = new Image();
  img.onload = function() {
      // context.drawImage(this, 0, 0, canvas.width, canvas.height);
  };
  img.src = myDataURL;
  canvas.setBackgroundImage(myDataURL, canvas.renderAll.bind(canvas));
  </code></pre>
  
  <p>But then I get the following error:</p>
  
  <p><a href="https://i.stack.imgur.com/F7R6v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F7R6v.png" alt="Screenshot"></a></p>
  
  <p><strong>Update 1 (02.12.2015 13:23 MSK):</strong> Regardless of which method I use, the background image disappears as soon as I click on it after download.</p>
  
  <p><a href="https://youtu.be/9e5ndHzaL14" rel="nofollow noreferrer">Here</a> is a video, which shows, what I mean.</p>
  
  <p><strong>Update 2 (02.12.2015 13:28 MSK):</strong></p>
  
  <p>Here's the current version of code:</p>
  
  <p>Option 1:</p>
  
  <pre><code>function ($xhr) {
      var myDataURL = "data:image/png;base64," + $xhr;
      var canvas = new fabric.Canvas('canvas');
      var img = new Image();
      img.onload = function() {
          var f_img = new fabric.Image(img);
          canvas.setBackgroundImage(f_img);
          canvas.renderAll();
      };
      img.src = myDataURL;
  }
  </code></pre>
  
  <p>Option 2:</p>
  
  <pre><code>function ($xhr) {
      var myDataURL = "data:image/png;base64," + $xhr;
      var canvas = new fabric.Canvas('canvas');
      canvas.setBackgroundImage(myDataURL, canvas.renderAll.bind(canvas));
  }
  </code></pre>
  
  <p><strong>Update 3 (02.12.2015 14:07 MSK):</strong></p>
  
  <p>Same problem occurs, if I try to add a rectangle to the canvas using the following code.</p>
  
  <pre><code>function rectButtonPressed() {
      var canvas = new fabric.Canvas('canvas');
      var rect = new fabric.Rect({
        left: 100,
        top: 100,
        fill: 'red',
        width: 20,
        height: 20
      });
      canvas.add(rect);
  }
  </code></pre>
  
  <p>First, it appears, but when I click on the canvas, it becomes empty again.</p>