From 0e4c1c78a715b9810daf7fc7f32b2a22b3df8489 Mon Sep 17 00:00:00 2001
From: thesved <2893181+thesved@users.noreply.github.com>
Date: Tue, 5 Oct 2021 16:52:29 +0200
Subject: [PATCH] prevent image resolution loss

render and copy images at the current scale, instead of downscaling, losing resolution, then rescaling them
---
 src/render/canvas/canvas-renderer.ts | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts
index 48e7315..7028cd9 100644
--- a/src/render/canvas/canvas-renderer.ts
+++ b/src/render/canvas/canvas-renderer.ts
@@ -596,16 +596,29 @@ export class CanvasRenderer extends Renderer {
                 }
 
                 if (image) {
-                    const [path, x, y, width, height] = calculateBackgroundRendering(container, index, [
+                    let [path, x, y, width, height] = calculateBackgroundRendering(container, index, [
                         image.width,
                         image.height,
                         image.width / image.height
                     ]);
+                    // prevent image resolution loss: render and copy img at current scale, instead of downscaling then rescaling
+                    // recalculate for null transformation
+                    path = path.map(function(v){v.x = (v.x-this.options.x)*this.options.scale; v.y = (v.y-this.options.y)*this.options.scale; return v});
+                    x = (x - this.options.x) * this.options.scale;
+                    y = (y - this.options.y) * this.options.scale;
+                    width *= this.options.scale;
+                    height *= this.options.scale;
+                    // backup context and change to null transform
+                    this.ctx.save();
+                    this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+                    // draw
                     const pattern = this.ctx.createPattern(
                         this.resizeImage(image, width, height),
                         'repeat'
                     ) as CanvasPattern;
                     this.renderRepeat(path, pattern, x, y);
+                    // restore context
+                    this.ctx.restore();
                 }
             } else if (isLinearGradient(backgroundImage)) {
                 const [path, x, y, width, height] = calculateBackgroundRendering(container, index, [null, null, null]);