Fix rendering of canvas on high-dpi screens

soaringmeteo · Nov 14, 2023 · 23884ee · 23884ee
1 parent a6e63c2
commit 23884ee
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 28 deletions.
diff --git a/frontend/src/diagrams/Diagram.ts b/frontend/src/diagrams/Diagram.ts
@@ -1,7 +1,21 @@
-import { cloudPattern, drawCumulusCloud } from "../shapes";
+import { drawCumulusCloud } from "../shapes";
 
 type Point = [/* x */ number, /* y */ number]
 
+/** Taken from https://dev.to/pahund/how-to-fix-blurry-text-on-html-canvases-on-mobile-phones-3iep */
+export const setupCanvas = (canvas: HTMLCanvasElement, width: number, height: number): void => {
+ const pixelRatio = Math.ceil(window.devicePixelRatio);
+ canvas.width = width * pixelRatio;
+ canvas.height = height * pixelRatio;
+ canvas.style.width = `${width}px`;
+ canvas.style.height = `${height}px`;
+ const ctx = canvas.getContext('2d');
+ if (ctx !== null) {
+ ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+ }
+};
+
+
 /**
  * A diagram within a canvas.
  * 

diff --git a/frontend/src/diagrams/Meteogram.tsx b/frontend/src/diagrams/Meteogram.tsx
@@ -1,6 +1,14 @@
 import { LocationForecasts, DetailedForecast } from '../data/LocationForecasts';
 import { drawWindArrow, lightningShape } from '../shapes';
-import { Diagram, Scale, boundaryLayerStyle, computeElevationLevels, skyStyle, temperaturesRange } from './Diagram';
+import {
+ Diagram,
+ Scale,
+ boundaryLayerStyle,
+ computeElevationLevels,
+ skyStyle,
+ temperaturesRange,
+ setupCanvas
+} from './Diagram';
 import { colorScale as thqColorScale } from '../layers/ThQ';
 import { drawCloudCover } from './Clouds';
 import { createEffect, JSX } from 'solid-js';
@@ -61,26 +69,17 @@ export const meteogram = (forecasts: LocationForecasts, state: State): { key: JS
  const canvasWidth = meteogramColumnWidth * forecasts.dayForecasts.reduce((n, forecast) => n + forecast.forecasts.length, 0);
  const canvasHeight = rainDiagramTop + rainDiagramHeight + gutterHeight;
  const canvas = document.createElement('canvas');
- canvas.setAttribute('width', `${canvasWidth}`);
- canvas.setAttribute('height', `${canvasHeight}`);
- canvas.style.width = `${canvasWidth}px`;
- canvas.style.height = `${canvasHeight}px`;
+ setupCanvas(canvas, canvasWidth, canvasHeight);
  const ctx = canvas.getContext('2d');
 
  const canvasLeftKey = document.createElement('canvas');
- canvasLeftKey.setAttribute('width', `${keyWidth}`);
- canvasLeftKey.setAttribute('height', `${canvasHeight}`);
+ setupCanvas(canvasLeftKey, keyWidth, canvasHeight);
  canvasLeftKey.style.flex = '0 0 auto';
- canvasLeftKey.style.width = `${keyWidth}px`;
- canvasLeftKey.style.height = `${canvasHeight}px`;
  const leftKeyCtx = canvasLeftKey.getContext('2d');
 
  const canvasRightKey = document.createElement('canvas');
- canvasRightKey.setAttribute('width', `${keyWidth}`);
- canvasRightKey.setAttribute('height', `${canvasHeight}`);
+ setupCanvas(canvasRightKey, keyWidth, canvasHeight)
  canvasRightKey.style.flex = '0 0 auto';
- canvasRightKey.style.width = `${keyWidth}px`;
- canvasRightKey.style.height = `${canvasHeight}px`;
  const rightKeyCtx = canvasRightKey.getContext('2d');
 
  if (ctx !== null && forecasts.dayForecasts.length !== 0 && leftKeyCtx !== null && rightKeyCtx !== null) {

diff --git a/frontend/src/diagrams/Sounding.tsx b/frontend/src/diagrams/Sounding.tsx
@@ -1,4 +1,14 @@
-import { Diagram, Scale, boundaryLayerStyle, computeElevationLevels, nextValue, previousValue, skyStyle, temperaturesRange } from './Diagram';
+import {
+ Diagram,
+ Scale,
+ boundaryLayerStyle,
+ computeElevationLevels,
+ nextValue,
+ previousValue,
+ skyStyle,
+ temperaturesRange,
+ setupCanvas
+} from './Diagram';
 import { AboveGround, DetailedForecast } from "../data/LocationForecasts";
 import { drawCloudCover } from './Clouds';
 import { drawWindArrow } from '../shapes';
@@ -43,18 +53,12 @@ export const sounding = (forecast: DetailedForecast, elevation: number, zoomedDe
 
  // Main canvas contains the sounding diagram
  const canvas = document.createElement('canvas');
- canvas.style.width = `100%`;
- canvas.style.height = `100%`;
- canvas.setAttribute('width', `${soundingWidth}`);
- canvas.setAttribute('height', `${canvasHeight}`);
+ setupCanvas(canvas, soundingWidth, canvasHeight);
  const ctx = canvas.getContext('2d');
 
  // Left key contains the vertical axis of the sounding diagram
  const canvasLeftKey = document.createElement('canvas');
- canvasLeftKey.setAttribute('width', `${keyWidth}`);
- canvasLeftKey.setAttribute('height', `${canvasHeight}`);
- canvasLeftKey.style.width = `${keyWidth}px`;
- canvasLeftKey.style.height = `${canvasHeight}px`;
+ setupCanvas(canvasLeftKey, keyWidth, canvasHeight);
  const leftCtx = canvasLeftKey.getContext('2d');
 
  const [zoomed, zoom] = createSignal(zoomedDefaultValue);
@@ -142,11 +146,8 @@ const drawSounding = (
 
  rootView.style.width = `${soundingWidth}px`;
  rootView.style.height = `${canvasHeight}px`;
-
- canvas.setAttribute('width', `${soundingWidth}`);
- canvas.setAttribute('height', `${canvasHeight}`);
- canvasLeftKey.setAttribute('height', `${canvasHeight}`);
- canvasLeftKey.style.height = `${canvasHeight}px`;
+ setupCanvas(canvas, soundingWidth, canvasHeight);
+ setupCanvas(canvasLeftKey, keyWidth, canvasHeight);
 
  // Clear everything first
  ctx.save();