Scale graph canvas based on DPI factor

Similar to fixes in litegraph.js editor demo:
https://github.com/ernestp/litegraph.js/blob/3ef215cf11b5d38cc4f7062d6f78b478e2f02b39/editor/js/code.js#L19-L28

Also workarounds to address viewpoint problem of lightgrapgh.js in DPI scaling scenario.

Fixes comfyanonymous#161

web/scripts/app.js

@@ -4,7 +4,19 @@ import { api } from "./api.js";
 import { defaultGraph } from "./defaultGraph.js";
 import { getPngMetadata, importA1111, getLatentMetadata } from "./pnginfo.js";
 
-/** 
+// DPI scaling fix, see https://github.com/comfyanonymous/ComfyUI/pull/845
+(function() {
+	const originalRenderInfo = LGraphCanvas.prototype.renderInfo
+	LGraphCanvas.prototype.renderInfo = function(ctx, x, y) {
+		// Patch renderInfo() to use canvas.offsetHeight instead of canvas.height as bottom viewpoint bound
+		if (!y) {
+			y = this.canvas.offsetHeight - 80
+		}
+		return originalRenderInfo.call(this, ctx, x, y)
+	}
+})()
+
+/**
  * @typedef {import("types/comfy").ComfyExtension} ComfyExtension
  */
 
@@ -1038,8 +1050,12 @@ export class ComfyApp {
 		this.graph.start();
 
 		function resizeCanvas() {
-			canvasEl.width = canvasEl.offsetWidth;
-			canvasEl.height = canvasEl.offsetHeight;
+			// Limit minimal scale to 1, see https://github.com/comfyanonymous/ComfyUI/pull/845
+			const scale = Math.max(window.devicePixelRatio, 1);
+			const { width, height } = canvasEl.getBoundingClientRect();
+			canvasEl.width = Math.round(width * scale);
+			canvasEl.height = Math.round(height * scale);
+			canvasEl.getContext("2d").scale(scale, scale);
 			canvas.draw(true, true);
 		}