From c57ffcb05f53289db3f668b1b5bdcda8f5bc1357 Mon Sep 17 00:00:00 2001 From: Maxim Gavrilov Date: Fri, 30 Apr 2021 16:20:15 +0300 Subject: [PATCH] Fix photos and linear gradient for retina --- src/render/canvas/canvas-renderer.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts index f6d3a4a..d552439 100644 --- a/src/render/canvas/canvas-renderer.ts +++ b/src/render/canvas/canvas-renderer.ts @@ -525,12 +525,19 @@ export class CanvasRenderer { renderRepeat(path: Path[], pattern: CanvasPattern | CanvasGradient, offsetX: number, offsetY: number) { this.path(path); this.ctx.fillStyle = pattern; + this.ctx.save(); this.ctx.translate(offsetX, offsetY); + if (this.options.scale) { + this.ctx.scale(1 / this.options.scale, 1 / this.options.scale); + } this.ctx.fill(); - this.ctx.translate(-offsetX, -offsetY); + this.ctx.restore(); } resizeImage(image: HTMLImageElement, width: number, height: number): HTMLCanvasElement | HTMLImageElement { + width *= this.options.scale || 1; + height *= this.options.scale || 1; + if (image.width === width && image.height === height) { return image; } @@ -568,13 +575,17 @@ export class CanvasRenderer { this.renderRepeat(path, pattern, x, y); } } else if (isLinearGradient(backgroundImage)) { - const [path, x, y, width, height] = calculateBackgroundRendering(container, index, [null, null, null]); + let [path, x, y, width, height] = calculateBackgroundRendering(container, index, [null, null, null]); const [lineLength, x0, x1, y0, y1] = calculateGradientDirection(backgroundImage.angle, width, height); + width *= this.options.scale || 1; + height *= this.options.scale || 1; + const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; + ctx.scale(this.options.scale || 1, this.options.scale || 1); const gradient = ctx.createLinearGradient(x0, y0, x1, y1); processColorStops(backgroundImage.stops, lineLength).forEach(colorStop =>