title: Wait until CSS changes (resizing) have taken effect before continuing script
body: <p>I have a script that changes the size of a canvas to fit the image that is being loaded on it, and then downloads the image from the canvas. I need to resize it, or else the downloaded image includes any whitespace around it and looks smaller than it should. </p>
  
  <pre><code>originalImg.onload = function() {
  
      var width = originalImg.width;
      var height = originalImg.height;
  
      $("#myCanvas").css({ "height": height + "px", "width": width + "px", "margin-bottom": -height + "px" });
  
      var c = viewer.drawer.canvas;
  
      c.toBlob(function(blob) {
          saveAs(blob, '@Model.DatabaseName' + '.jpg');
      }); 
  }
  originalImg.src = originalSrc;
  </code></pre>
  
  <p>But when the image downloads, it still has all the whitespace. My script is completing before the canvas actually resizes, even though I resize it at the beginning. How can I make the canvas actually resize before completing the rest of the script?</p>
  
  <p>edit: I can see by stepping through the script that the whole script finishes before the canvas actually changes size on the page. </p>