I am using canvas to draw cropped image with base 64 but the problem is that my code is working on Chrome but it was give me a blank image on Firefox

async function base64SquareCrop(imgbase64, size = 224) {
const img = document.createElement("img");
await img.setAttribute("src", imgbase64);

let width = img.width;
let height = img.height;
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");
await ctx_img.drawImage(
    img,
    ~~(dx / 2) * -1,
    ~~(dy / 2) * -1,
    scaledW,
    scaledH
);
return canvasImage.toDataURL("image/png");
}