title: Changing Backgrounds Not Working as Expected
body: <p>I'm currently using the following to set an image and replace it as needed (with fabricjs 1.7.22), but I'm trying to get away from <code>onclick=</code> so am opting to replace the background with a number of <code>id</code>s with jQuery.</p>
  
  <p><strong>Currently, things look something like this:</strong></p>
  
  <p><em>My HTML</em></p>
  
  <pre><code>&lt;a onclick="replaceImage(oImg, '../images/1.png')" class="dropdown-item"&gt;Image Name 1&lt;/a&gt;
  &lt;a onclick="replaceImage(oImg, '../images/2.png')" class="dropdown-item"&gt;Image Name 2&lt;/a&gt;
  </code></pre>
  
  <p><em>My JS</em></p>
  
  <pre><code>// Image Replacing
  function replaceImage(oImgObj, imgUrl) {
    if (!isImageLoaded) return; //return if initial image not loaded
    var imgElem = oImgObj._element; //reference to actual image element
    imgElem.src = imgUrl; //set image source
    imgElem.onload = () =&gt; canvas1.renderAll(); //render on image load
  }
  
  // Default Image
  fabric.Image.fromURL('../images/images/0.png'', function (img) {
    isImageLoaded = true;
    oImg = img.set({
      selectable: false,
      evented: false,
    }).scale(0.5);
    canvas1.add(oImg).renderAll();
    canvas1.sendToBack(oImg);
  });
  </code></pre>
  
  <p><strong>What I'm trying now, but isn't working:</strong></p>
  
  <p><em>My HTML</em></p>
  
  <pre><code>&lt;a id="i0" class="dropdown-item"&gt;Image 1&lt;/a&gt;
  &lt;a id="i1" class="dropdown-item"&gt;Image 2&lt;/a&gt;
  </code></pre>
  
  <p><em>My JS</em></p>
  
  <pre><code>$("#i0").click(function () {
    canvas1.setBackgroundImage('../images/0.png', canvas1.renderAll.bind(canvas1), {
      // Needed to position backgroundImage at 0/0
      originX: 'left',
      originY: 'top'
    });
  });
  
  $("#i1").click(function () {
    canvas1.setBackgroundImage('../images/1.png', canvas1.renderAll.bind(canvas1), {
      // Needed to position backgroundImage at 0/0
      originX: 'left',
      originY: 'top'
    });
  });
  </code></pre>
  
  <p>When I click one of the latter buttons, nothing happens and I don't get any errors so this is throwing me for a loop. What could I be doing wrong?</p>