diff --git a/src/scene/fancyBackground.ts b/src/scene/fancyBackground.ts index c68ef2c40..5e3f0da75 100644 --- a/src/scene/fancyBackground.ts +++ b/src/scene/fancyBackground.ts @@ -21,6 +21,7 @@ const addImageBackground = ( context: CanvasRenderingContext2D, canvasDimensions: Dimensions, fancyBackgroundImage: HTMLImageElement, + exportScale: AppState["exportScale"], ) => { context.save(); context.beginPath(); @@ -30,7 +31,7 @@ const addImageBackground = ( 0, canvasDimensions.width, canvasDimensions.height, - FANCY_BG_BORDER_RADIUS, + FANCY_BG_BORDER_RADIUS * exportScale, ); } else { roundRect( @@ -39,7 +40,7 @@ const addImageBackground = ( 0, canvasDimensions.width, canvasDimensions.height, - FANCY_BG_BORDER_RADIUS, + FANCY_BG_BORDER_RADIUS * exportScale, ); } const scale = getScaleToFill( @@ -93,9 +94,9 @@ const addContentBackground = ( context.save(); context.beginPath(); context.shadowColor = `rgba(0, 0, 0, ${shadow.alpha})`; - context.shadowBlur = shadow.blur; - context.shadowOffsetX = shadow.offsetX; - context.shadowOffsetY = shadow.offsetY; + context.shadowBlur = shadow.blur * exportScale; + context.shadowOffsetX = shadow.offsetX * exportScale; + context.shadowOffsetY = shadow.offsetY * exportScale; if (context.roundRect) { context.roundRect( @@ -158,7 +159,12 @@ export const applyFancyBackgroundOnCanvas = async ({ height: canvas.height, }; - addImageBackground(context, canvasDimensions, fancyBackgroundImage); + addImageBackground( + context, + canvasDimensions, + fancyBackgroundImage, + exportScale, + ); addContentBackground( context,