fix: position of background and content on y axis

src/scene/export.ts

@@ -90,7 +90,7 @@ export const exportToCanvas = async (
   const onlyExportingSingleFrame = isOnlyExportingSingleFrame(elements);
 
   let scrollXAdjustment = 0;
-  const scrollYAdjustment = 0;
+  let scrollYAdjustment = 0;
 
   if (
     exportWithFancyBackground &&
@@ -114,6 +114,9 @@ export const exportToCanvas = async (
 
     scrollXAdjustment =
       (width - contentSize.width - (padding[1] + padding[3])) / 2;
+
+    scrollYAdjustment =
+      (height - contentSize.height - (padding[0] + padding[2])) / 2;
   }
 
   renderStaticScene({

src/scene/fancyBackground.ts

@@ -90,31 +90,26 @@ const getContentBackgound = (
   exportScale: number,
   includeLogo: boolean,
 ): { x: number; y: number; width: number; height: number } => {
-  const x =
+  const totalPaddingAndRadius = DEFAULT_EXPORT_PADDING + FANCY_BG_BORDER_RADIUS;
-    (normalizedCanvasDimensions.width - contentSize.width * exportScale) / 2 -
-    FANCY_BG_PADDING * exportScale;
-
-  const y =
-    (normalizedCanvasDimensions.height -
-      (contentSize.height + DEFAULT_EXPORT_PADDING + FANCY_BG_BORDER_RADIUS) *
-        exportScale) /
-      2 -
-    FANCY_BG_PADDING * exportScale;
 
   const width =
-    (contentSize.width +
+    (Math.round(contentSize.width) + totalPaddingAndRadius * 2) * exportScale;
-      (DEFAULT_EXPORT_PADDING + FANCY_BG_BORDER_RADIUS) * 2) *
-    exportScale;
-
   const height =
-    (contentSize.height +
+    (Math.round(contentSize.height) + totalPaddingAndRadius * 2) * exportScale;
-      DEFAULT_EXPORT_PADDING +
-      FANCY_BG_BORDER_RADIUS -
-      (includeLogo ? FANCY_BG_LOGO_PADDING : 0) +
-      (DEFAULT_EXPORT_PADDING + FANCY_BG_BORDER_RADIUS) * 2) *
-    exportScale;
 
-  return { x, y, width, height };
+  const x = (normalizedCanvasDimensions.width - width) / 2;
+  let y = (normalizedCanvasDimensions.height - height) / 2;
+
+  if (includeLogo) {
+    y -= (FANCY_BG_LOGO_PADDING / 2) * exportScale;
+  }
+
+  return {
+    x,
+    y,
+    width,
+    height,
+  };
 };
 
 const addContentBackground = (