Wait for the CSS (resize) changes to take effect before the script continues

Question

I have a script that resizes the canvas to fit the image they load, and then loads the image from the canvas. I need to resize it, otherwise the uploaded image includes any spaces around it and looks smaller than necessary.

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; 

But when loading an image, it still has spaces. My script completes before the canvas actually resizes, even if I resized it at the beginning. How can I make the canvas actually resize before completing the rest of the script?

edit: I can see, going through the script, that the whole script ends before the canvas actually resizes on the page.

Answer 1

You change the CSS for the canvas, but only the size displayed on the screen, and not the actual size of the canvas element itself. You can scale the canvas element using CSS without changing its contents.

Try creating a new canvas element for each image after loading it and set the canvas to the correct size for this image, and you should find it correctly.

If you want the graphical representation of your image in your existing canvas / layout not to be a problem, you can copy the image into both and have a “working” canvas hidden from view.