You have to use promises to wait for the onload event.

function base64SquareCrop(imgbase64, size = 224) {
    const img = document.createElement("img");
    await img.setAttribute("src", imgbase64);
    
    let width = 1240;
    let height = 698;
    const min = Math.min(width, height);
    const scale = size / min;
    const scaledW = Math.ceil(width * scale);
    const scaledH = Math.ceil(height * scale);
    const dx = scaledW - size;
    const dy = scaledH - size;
    canvasImage.width = canvasImage.height = size;
    const ctx_img = canvasImage.getContext("2d");
    var loadPromise = new Promise(function (resolve) {
        img.onload = function() {
            ctx_img.drawImage(
                img,
                ~~(dx / 2) * -1,
                ~~(dy / 2) * -1,
                scaledW,
                scaledH
            );
            resolve(canvasImage.toDataURL("image/png"));
        }
    }, function (reject) {reject("ERROR!")});
    return loadPromise;
}

From there, you'll have to await base64SquareCrop(...) inside of an asynchronous function. I don't know any better way to do it.