ui-spacetimechart: add support for HiDPI

Multiply the canvas buffer size by the number of physical pixels
per logical pixels. Use CSS to set the size of the canvas element
in logical pixels.

Signed-off-by: Simon Ser <[email protected]>
References: #757

Author: emersion

ui-spacetimechart/src/hooks/useCanvas.ts

@@ -210,14 +210,21 @@ export function useCanvas(
 
   // Handle resizing:
   useEffect(() => {
+    const scale = window.devicePixelRatio || 1;
+
     for (const id in canvasesRef.current) {
       const canvas = canvasesRef.current[id];
+      const ctx = contextsRef.current[id];
 
       if (canvas) {
         canvas.style.width = size.width + 'px';
         canvas.style.height = size.height + 'px';
-        canvas.setAttribute('width', size.width + 'px');
-        canvas.setAttribute('height', size.height + 'px');
+        canvas.setAttribute('width', size.width * scale + 'px');
+        canvas.setAttribute('height', size.height * scale + 'px');
+
+        // Reset the transform to identity, then apply the new scale
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.scale(scale, scale);
       }
     }