Merge branch 'hidpi-canvas' of https://github.com/EHfive/ComfyUI

web/scripts/app.js

@@ -4,6 +4,18 @@ 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;
+			// Limit minimal scale to 1, see https://github.com/comfyanonymous/ComfyUI/pull/845
-			canvasEl.height = canvasEl.offsetHeight;
+			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);
 		}