Why does my canvas not always display the drawn image? - ionic-framework

Question

In my ionic app, I am trying to scale a photo and draw it onto a canvas. Here's my code:
HTML:
<ion-header>
<ion-toolbar>
<ion-icon name="camera" slot="start" style="padding-left: 8px; font-size: x-large"></ion-icon>
<ion-title>Photo</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<canvas id="mainCanvas" #mainCanvas style="display: block; padding-top: 20px; margin: 10px auto; height: 90%;"></canvas>
</ion-content>
<ion-footer>
<ion-item lines="none">
<ion-tabs tabsPlacement="bottom">
<ion-tab-bar slot="bottom">
<ion-tab-button size="small" (click)="openCamera()">
<ion-icon name="camera"></ion-icon>
<ion-label>Add Photo</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-item>
</ion-footer>
.ts:
private updateCanvas() {
const img = new Image();
const ctx = this._CONTEXT;
const canvas = this._CANVAS;
// set final size of image to be displayed (half the size of the screen, to allow for other controls to be shown)
const displayWidth = this.plt.width() / 1.60;
const displayHeight = this.plt.height() / 1.60;
canvas.width = displayWidth;
canvas.height = displayHeight;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#ff0000";
if (this.photo == null) {
console.log("updateCanvas: photo object is null");
return;
}
// Create an offscreen buffer to draw the full-sized photo onto
const bufferCanvas = document.createElement('canvas');
const bufferCtx = bufferCanvas.getContext('2d');
const path = this.file.dataDirectory + this.photo.id + "." + this.photo.file_extension;
img.onload = (() => {
console.log("updateCanvas > img.onload > photo: ", this.photo);
// Scale the buffer canvas to match original size of photo
bufferCanvas.width = img.width;
bufferCanvas.height = img.height;
if (bufferCtx && ctx) {
// Draw photo to buffer canvas
console.log("updateCanvas > drawing onto buffer...");
bufferCtx.drawImage(img, 0, 0);
// Get the photo and main canvas aspect ratios
const imgAspect = img.height / img.width;
const mainAspect = canvas.height / canvas.width;
// Should the image fill the canvas width, or height?
const fillWidth = true; // imgAspect > mainAspect;
// Determine the new scale of the image so that it covers the main canvas
// This would need adjusting if we wanted it contained within the main canvas (no overhang)
const scaledWidth = fillWidth ? displayWidth : displayHeight / imgAspect;
const scaledHeight = fillWidth ? displayWidth * imgAspect : displayHeight;
// Translate to the center of the main canvas
ctx.translate(displayWidth / 2, displayHeight / 2);
// Draw the buffer to the main canvas
// Take off half the scaled dimensions so that it doesn't draw in the bottom right corner
ctx.drawImage(bufferCanvas, -scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight);
}
});
console.log("updateCanvas > path: ", path);
img.src = (<any>window).Ionic.WebView.convertFileSrc(path);
}
However, my updateCanvas method only seems to work randomly when called. It's completely random, sometimes it will draw after two calls, sometimes only after 7 calls. Can anyone spot what might be preventing the canvas from being drawn? I have verified that the photo file exists in the folder specified by the path variable. If I draw to the canvas without scaling, the image is drawn to the canvas without problems.
edit1: noticed something weird - when I display an alert before updating the canvas, the canvas shows the correctly scaled photo. E.g.
this.presentAlert("test", "test")
.then(() => this.updateCanvas());