diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte index 7c8b4c9..fbe372b 100644 --- a/src/lib/components/ComfyApp.svelte +++ b/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) { diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts index 050c8ca..8f11d8b 100644 --- a/src/lib/components/ComfyApp.ts +++ b/src/lib/components/ComfyApp.ts @@ -77,8 +77,19 @@ export default class ComfyApp { } resizeCanvas() { - this.canvasEl.width = this.canvasEl.parentElement.clientWidth; - this.canvasEl.height = this.canvasEl.parentElement.clientHeight; + // get current size of the canvas + 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); }