feat: load background image in promise

src/renderer/renderScene.ts

@@ -391,7 +391,8 @@ const addExportBackground = (
   normalizedCanvasHeight: number,
   svgUrl: string,
   rectangleColor: string,
-): void => {
+): Promise<void> => {
+  return new Promise((resolve, reject) => {
     const MARGIN = 24;
     const BORDER_RADIUS = 12;
 
@@ -497,10 +498,17 @@ const addExportBackground = (
       ctx.shadowBlur = 0;
       ctx.shadowOffsetX = 0;
       ctx.shadowOffsetY = 0;
+
+      resolve();
+    };
+
+    img.onerror = (): void => {
+      reject(new Error(`Failed to load image with URL ${svgUrl}`));
     };
 
     // Start loading the image
     img.src = svgUrl;
+  });
 };
 
 export const _renderScene = ({
@@ -558,13 +566,19 @@ export const _renderScene = ({
       }
       context.save();
       if (isExporting && exportBackgroundImage) {
-        addExportBackground(
+        (async () => {
+          try {
+            await addExportBackground(
               canvas,
               normalizedCanvasWidth,
               normalizedCanvasHeight,
               exportBackgroundImage,
-          renderConfig.viewBackgroundColor,
+              renderConfig.viewBackgroundColor!,
             );
+          } catch (error) {
+            console.error("Failed to add background:", error);
+          }
+        })();
       } else {
         context.fillStyle = renderConfig.viewBackgroundColor;
         context.fillRect(0, 0, normalizedCanvasWidth, normalizedCanvasHeight);