diff --git a/web/scripts/app.js b/web/scripts/app.js index bf424058..d3a05c27 100644 --- a/web/scripts/app.js +++ b/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); }