From e8fb405743a409b936f3e64585f98933e2f74292 Mon Sep 17 00:00:00 2001 From: "Adrien Minne (adrm)" Date: Thu, 26 Mar 2026 14:38:07 +0100 Subject: [PATCH] [FIX] zoom: scorecard chart rendering with zoom The scorecards were blurry when zooming a sheet. We were not scaling their canvas properly according to the zoom level. Task: 6072348 --- .../figures/chart/scorecard/chart_scorecard.ts | 2 +- src/helpers/figures/charts/scorecard_chart.ts | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/figures/chart/scorecard/chart_scorecard.ts b/src/components/figures/chart/scorecard/chart_scorecard.ts index c37cfbeff3..86dd70b805 100644 --- a/src/components/figures/chart/scorecard/chart_scorecard.ts +++ b/src/components/figures/chart/scorecard/chart_scorecard.ts @@ -43,6 +43,6 @@ export class ScorecardChart extends Component { getZoomedRect(1 / zoom, canvas.getBoundingClientRect()), this.runtime ); - drawScoreChart(config, canvas); + drawScoreChart(config, canvas, zoom); } } diff --git a/src/helpers/figures/charts/scorecard_chart.ts b/src/helpers/figures/charts/scorecard_chart.ts index 15c7b618bb..0394d5fb96 100644 --- a/src/helpers/figures/charts/scorecard_chart.ts +++ b/src/helpers/figures/charts/scorecard_chart.ts @@ -310,7 +310,8 @@ type Canvas2DContext = CanvasRenderingContext2D | OffscreenCanvasRenderingContex export function drawScoreChart( structure: ScorecardChartConfig, - canvas: HTMLCanvasElement | OffscreenCanvas + canvas: HTMLCanvasElement | OffscreenCanvas, + zoom: number = 1 ) { const ctx = canvas.getContext("2d") as Canvas2DContext; if (!ctx) { @@ -318,9 +319,9 @@ export function drawScoreChart( } const dpr = typeof globalThis.devicePixelRatio === "number" ? globalThis.devicePixelRatio : 1; - canvas.width = dpr * structure.canvas.width; - canvas.height = dpr * structure.canvas.height; - ctx.scale(dpr, dpr); + canvas.width = dpr * structure.canvas.width * zoom; + canvas.height = dpr * structure.canvas.height * zoom; + ctx.scale(dpr * zoom, dpr * zoom); const availableWidth = structure.canvas.width - CHART_PADDING; ctx.fillStyle = structure.canvas.backgroundColor;