From 5a7dfcc0193c192e14b094aeace7d8205e001847 Mon Sep 17 00:00:00 2001 From: Mark Kalsbeek Date: Sat, 8 Aug 2026 21:19:25 +0200 Subject: [PATCH] take aspect ratio into account when rasterizing --- px-icon.js | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/px-icon.js b/px-icon.js index 45c0923..5ed9e7d 100644 --- a/px-icon.js +++ b/px-icon.js @@ -192,10 +192,12 @@ class PxIcon extends HTMLElement { const apSize = parseFloat(cs.getPropertyValue('--pxicon-ap-size')) || DEFAULT_AP_SIZE; const mode = (cs.getPropertyValue('--pxicon-mode') || DEFAULT_MODE).trim(); - const displaySize = Math.max(this.clientWidth, this.clientHeight) || 24; - const snapped = snapToGrid(displaySize, apSize); - const gridW = Math.max(1, Math.round(snapped / apSize)); - const gridH = gridW; + const displayW = this.clientWidth || 24; + const displayH = this.clientHeight || 24; + const snappedW = snapToGrid(displayW, apSize); + const snappedH = snapToGrid(displayH, apSize); + const gridW = Math.max(1, Math.round(snappedW / apSize)); + const gridH = Math.max(1, Math.round(snappedH / apSize)); const svgMarkup = svgEl.outerHTML; const key = `${svgMarkup}|${mode}|${gridW}x${gridH}`; @@ -211,13 +213,14 @@ class PxIcon extends HTMLElement { const gridCanvas = await getGridRaster(svgMarkup, mode, gridW, gridH); const dpr = window.devicePixelRatio || 1; - const backingSize = Math.round(snapped * dpr); - this._canvas.width = backingSize; - this._canvas.height = backingSize; + const backingW = Math.round(snappedW * dpr); + const backingH = Math.round(snappedH * dpr); + this._canvas.width = backingW; + this._canvas.height = backingH; const ctx = this._canvas.getContext('2d'); ctx.imageSmoothingEnabled = false; - ctx.clearRect(0, 0, backingSize, backingSize); - ctx.drawImage(gridCanvas, 0, 0, backingSize, backingSize); + ctx.clearRect(0, 0, backingW, backingH); + ctx.drawImage(gridCanvas, 0, 0, backingW, backingH); if (this._slot.isConnected) { // first successful raster: swap the placeholder slot for the