Canvas DPI scaling

src/lib/components/ComfyApp.svelte

@@ -76,10 +76,16 @@
  #comfy-graph {
  }
 
+ #graph-canvas {
+     width: 100%;
+     height: 100%;
+ }
+
  :global(html, body) {
      width: 100%;
      height: 100%;
      margin: 0px;
+     font-family: Arial;
  }
 
  :global(.splitpanes__pane) {

src/lib/components/ComfyApp.ts

@@ -77,8 +77,19 @@ export default class ComfyApp {
     }
 
     resizeCanvas() {
-        this.canvasEl.width = this.canvasEl.parentElement.clientWidth;
+        // get current size of the canvas
-        this.canvasEl.height = this.canvasEl.parentElement.clientHeight;
+        let rect = this.canvasEl.parentElement.getBoundingClientRect();
+
+        // increase the actual size of our canvas
+        this.canvasEl.width = rect.width * window.devicePixelRatio;
+        this.canvasEl.height = rect.height * window.devicePixelRatio;
+
+        // ensure all drawing operations are scaled
+        this.canvasCtx.scale(window.devicePixelRatio, window.devicePixelRatio);
+
+        // scale everything down using CSS
+        this.canvasEl.style.width = rect.width + 'px';
+        this.canvasEl.style.height = rect.height + 'px';
         this.lCanvas.draw(true, true);
     }