From 6dfe4184ba8b4605f0b6b8ff476d4fa7e695b93f Mon Sep 17 00:00:00 2001 From: "Adrien Minne (adrm)" Date: Thu, 26 Mar 2026 13:38:07 +0000 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 X-original-commit: ff534e926a6954782632da00d872f6e7903567ff --- .../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 d397720d1f..f692c048bd 100644 --- a/src/helpers/figures/charts/scorecard_chart.ts +++ b/src/helpers/figures/charts/scorecard_chart.ts @@ -383,7 +383,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) { @@ -391,9 +392,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;