diff --git a/src/scene/export.ts b/src/scene/export.ts index 62e35ea70..82f198cfd 100644 --- a/src/scene/export.ts +++ b/src/scene/export.ts @@ -97,6 +97,7 @@ export const exportToCanvas = async ( canvas, fancyBackgroundImageUrl: appState.fancyBackgroundImageUrl!, backgroundColor: viewBackgroundColor, + exportScale: appState.exportScale, }); } diff --git a/src/scene/fancyBackground.ts b/src/scene/fancyBackground.ts index a23efcecd..696702cdb 100644 --- a/src/scene/fancyBackground.ts +++ b/src/scene/fancyBackground.ts @@ -1,7 +1,7 @@ import { FANCY_BG_BORDER_RADIUS, FANCY_BG_PADDING } from "../constants"; import { loadHTMLImageElement } from "../element/image"; import { roundRect } from "../renderer/roundRect"; -import { DataURL } from "../types"; +import { AppState, DataURL } from "../types"; type Dimensions = { w: number; h: number }; @@ -61,6 +61,7 @@ const addContentBackground = ( context: CanvasRenderingContext2D, normalizedDimensions: Dimensions, contentBackgroundColor: string, + exportScale: AppState["exportScale"], ) => { const shadows = [ { @@ -94,20 +95,20 @@ const addContentBackground = ( if (context.roundRect) { context.roundRect( - FANCY_BG_PADDING, - FANCY_BG_PADDING, - normalizedDimensions.w - FANCY_BG_PADDING * 2, - normalizedDimensions.h - FANCY_BG_PADDING * 2, - FANCY_BG_BORDER_RADIUS, + FANCY_BG_PADDING * exportScale, + FANCY_BG_PADDING * exportScale, + normalizedDimensions.w - FANCY_BG_PADDING * 2 * exportScale, + normalizedDimensions.h - FANCY_BG_PADDING * 2 * exportScale, + FANCY_BG_BORDER_RADIUS * exportScale, ); } else { roundRect( context, - FANCY_BG_PADDING, - FANCY_BG_PADDING, - normalizedDimensions.w - FANCY_BG_PADDING * 2, - normalizedDimensions.h - FANCY_BG_PADDING * 2, - FANCY_BG_BORDER_RADIUS, + FANCY_BG_PADDING * exportScale, + FANCY_BG_PADDING * exportScale, + normalizedDimensions.w - FANCY_BG_PADDING * 2 * exportScale, + normalizedDimensions.h - FANCY_BG_PADDING * 2 * exportScale, + FANCY_BG_BORDER_RADIUS * exportScale, ); } @@ -124,10 +125,12 @@ export const applyFancyBackground = async ({ canvas, fancyBackgroundImageUrl, backgroundColor, + exportScale, }: { canvas: HTMLCanvasElement; fancyBackgroundImageUrl: DataURL; backgroundColor: string; + exportScale: AppState["exportScale"]; }) => { const context = canvas.getContext("2d")!; @@ -139,5 +142,5 @@ export const applyFancyBackground = async ({ addImageBackground(context, canvasDimensions, fancyBackgroundImage); - addContentBackground(context, canvasDimensions, backgroundColor); + addContentBackground(context, canvasDimensions, backgroundColor, exportScale); };