refactor: use builtin decode method to await image

src/utils/toCanvas.ts

@@ -11,18 +11,16 @@ interface Options {
 export async function toCanvas({ svg, canvas, crop }: Options) {
     const image64 = toImgSrc({ svg, crop })
 
-    return new Promise<void>((resolve, reject) => {
-        // set it as the source of the img element
-        const img = new Image()
-        img.onload = () => {
-            // draw the image onto the canvas once loaded
-            const unreffedCanvas = unref(canvas)
-            unreffedCanvas.height = img.height
-            unreffedCanvas.width = img.width
-            unreffedCanvas.getContext('2d')?.drawImage(img, 0, 0);
-            resolve()
-        }
-        img.onerror = () => reject(img);
-        img.src = image64;
-    });
+    const img = new Image()
+    img.src = image64;
+
+    // Wait for image to load
+    await img.decode()
+
+    // draw the image onto the canvas once loaded
+    const unreffedCanvas = unref(canvas)
+    unreffedCanvas.height = img.height
+    unreffedCanvas.width = img.width
+    unreffedCanvas.getContext('2d')?.drawImage(img, 0, 0);
+
 }