diff --git a/src/scene/export.ts b/src/scene/export.ts index f7009b67b..edd91e6d2 100644 --- a/src/scene/export.ts +++ b/src/scene/export.ts @@ -84,15 +84,19 @@ export const exportToCanvas = async ( }; if (appState.fancyBackgroundImageUrl) { + const contentBounds = getCommonBounds(elements); const updatedRenderProps = await applyFancyBackground({ canvas, fancyBackgroundImageUrl: appState.fancyBackgroundImageUrl, backgroundColor: viewBackgroundColor, scale, renderConfig, + contentDimensions: { + w: contentBounds[2] - contentBounds[0], + h: contentBounds[3] - contentBounds[1], + }, }); - console.log(scale, updatedRenderProps.scale); renderConfig = updatedRenderProps.renderConfig; scale = updatedRenderProps.scale; } diff --git a/src/scene/fancyBackground.ts b/src/scene/fancyBackground.ts index 63f9a40d8..a14eb6edc 100644 --- a/src/scene/fancyBackground.ts +++ b/src/scene/fancyBackground.ts @@ -137,6 +137,7 @@ const addContentBackground = ( const updateRenderConfig = ( renderConfig: RenderConfig, canvasDimensions: Dimensions, + contentDimesions: Dimensions, ): { scale: number; renderConfig: RenderConfig } => { const totalPadding = FANCY_BG_PADDING + FANCY_BG_BORDER_RADIUS + DEFAULT_EXPORT_PADDING; @@ -147,7 +148,7 @@ const updateRenderConfig = ( scrollX: renderConfig.scrollX + totalPadding, scrollY: renderConfig.scrollY + totalPadding, }, - scale: getScaleToFit(canvasDimensions, { + scale: getScaleToFit(contentDimesions, { w: canvasDimensions.w - totalPadding * 2, h: canvasDimensions.h - totalPadding * 2, }), @@ -159,12 +160,14 @@ export const applyFancyBackground = async ({ fancyBackgroundImageUrl, backgroundColor, renderConfig, + contentDimensions, }: { canvas: HTMLCanvasElement; fancyBackgroundImageUrl: DataURL; backgroundColor: string; scale: number; renderConfig: RenderConfig; + contentDimensions: Dimensions; }) => { const context = canvas.getContext("2d")!; @@ -183,5 +186,5 @@ export const applyFancyBackground = async ({ addContentBackground(context, canvasDimensions, backgroundColor); - return updateRenderConfig(renderConfig, canvasDimensions); + return updateRenderConfig(renderConfig, canvasDimensions, contentDimensions); };