Render vello canvas in wasm at the correct resolution

Author: TrueDoctor

editor/src/messages/portfolio/portfolio_message_handler.rs

@@ -364,12 +364,16 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageContext<'_>> for Portfolio
 					let node_to_inspect = self.node_to_inspect();
 
 					let scale = viewport.scale();
-					let resolution = viewport.size().into_dvec2().round().as_uvec2();
+					// Use logical dimensions for viewport resolution (foreignObject sizing)
+					let logical_resolution = viewport.size().into_dvec2().ceil().as_uvec2();
+					// Use exact physical dimensions from browser (via ResizeObserver's devicePixelContentBoxSize)
+					let physical_resolution = viewport.physical_size_uvec2();
 
 					if let Ok(message) = self.executor.submit_node_graph_evaluation(
 						self.documents.get_mut(document_id).expect("Tried to render non-existent document"),
 						*document_id,
-						resolution,
+						logical_resolution,
+						physical_resolution,
 						scale,
 						timing_information,
 						node_to_inspect,
@@ -970,11 +974,14 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageContext<'_>> for Portfolio
 				};
 
 				let scale = viewport.scale();
-				let resolution = viewport.size().into_dvec2().round().as_uvec2();
+				// Use logical dimensions for viewport resolution (foreignObject sizing)
+				let logical_resolution = viewport.size().into_dvec2().ceil().as_uvec2();
+				// Use exact physical dimensions from browser (via ResizeObserver's devicePixelContentBoxSize)
+				let physical_resolution = viewport.physical_size_uvec2();
 
 				let result = self
 					.executor
-					.submit_node_graph_evaluation(document, document_id, resolution, scale, timing_information, node_to_inspect, ignore_hash);
+					.submit_node_graph_evaluation(document, document_id, logical_resolution, physical_resolution, scale, timing_information, node_to_inspect, ignore_hash);
 
 				match result {
 					Err(description) => {

editor/src/messages/viewport/viewport_message.rs

@@ -3,6 +3,14 @@ use crate::messages::prelude::*;
 #[impl_message(Message, Viewport)]
 #[derive(PartialEq, Clone, Debug, serde::Serialize, serde::Deserialize)]
 pub enum ViewportMessage {
-	Update { x: f64, y: f64, width: f64, height: f64, scale: f64 },
+	Update {
+		x: f64,
+		y: f64,
+		width: f64,
+		height: f64,
+		scale: f64,
+		physical_width: f64,
+		physical_height: f64,
+	},
 	RepropagateUpdate,
 }

editor/src/messages/viewport/viewport_message_handler.rs

@@ -6,6 +6,8 @@ use crate::messages::tool::tool_messages::tool_prelude::DVec2;
 #[derive(Debug, PartialEq, Clone, Copy, serde::Serialize, serde::Deserialize, specta::Type, ExtractField)]
 pub struct ViewportMessageHandler {
 	bounds: Bounds,
+	// Physical bounds in device pixels (exact pixel dimensions from browser)
+	physical_bounds: Bounds,
 	// Ratio of logical pixels to physical pixels
 	scale: f64,
 }
@@ -16,6 +18,10 @@ impl Default for ViewportMessageHandler {
 				offset: Point { x: 0.0, y: 0.0 },
 				size: Point { x: 0.0, y: 0.0 },
 			},
+			physical_bounds: Bounds {
+				offset: Point { x: 0.0, y: 0.0 },
+				size: Point { x: 0.0, y: 0.0 },
+			},
 			scale: 1.0,
 		}
 	}
@@ -25,14 +31,29 @@ impl Default for ViewportMessageHandler {
 impl MessageHandler<ViewportMessage, ()> for ViewportMessageHandler {
 	fn process_message(&mut self, message: ViewportMessage, responses: &mut VecDeque<Message>, _: ()) {
 		match message {
-			ViewportMessage::Update { x, y, width, height, scale } => {
+			ViewportMessage::Update {
+				x,
+				y,
+				width,
+				height,
+				scale,
+				physical_width,
+				physical_height,
+			} => {
 				assert_ne!(scale, 0.0, "Viewport scale cannot be zero");
 				self.scale = scale;
 
 				self.bounds = Bounds {
 					offset: Point { x, y },
 					size: Point { x: width, y: height },
 				};
+				self.physical_bounds = Bounds {
+					offset: Point { x, y },
+					size: Point {
+						x: physical_width,
+						y: physical_height,
+					},
+				};
 				responses.add(NodeGraphMessage::UpdateNodeGraphWidth);
 			}
 			ViewportMessage::RepropagateUpdate => {}
@@ -81,6 +102,11 @@ impl ViewportMessageHandler {
 		self.bounds.size().into_scaled(self.scale)
 	}
 
+	pub fn physical_size_uvec2(&self) -> glam::UVec2 {
+		let size = self.physical_bounds.size();
+		glam::UVec2::new(size.x.ceil() as u32, size.y.ceil() as u32)
+	}
+
 	#[expect(private_bounds)]
 	pub fn logical<T: Into<Point>>(&self, point: T) -> LogicalPoint {
 		point.into().convert_to_logical(self.scale)

editor/src/node_graph_executor.rs

@@ -138,6 +138,7 @@ impl NodeGraphExecutor {
 		document: &mut DocumentMessageHandler,
 		document_id: DocumentId,
 		viewport_resolution: UVec2,
+		physical_viewport_resolution: UVec2,
 		viewport_scale: f64,
 		time: TimingInformation,
 	) -> Result<Message, String> {
@@ -148,6 +149,7 @@ impl NodeGraphExecutor {
 		};
 		let render_config = RenderConfig {
 			viewport,
+			physical_viewport_resolution,
 			scale: viewport_scale,
 			time,
 			export_format: graphene_std::application_io::ExportFormat::Raster,
@@ -171,13 +173,14 @@ impl NodeGraphExecutor {
 		document: &mut DocumentMessageHandler,
 		document_id: DocumentId,
 		viewport_resolution: UVec2,
+		physical_viewport_resolution: UVec2,
 		viewport_scale: f64,
 		time: TimingInformation,
 		node_to_inspect: Option<NodeId>,
 		ignore_hash: bool,
 	) -> Result<Message, String> {
 		self.update_node_graph(document, node_to_inspect, ignore_hash)?;
-		self.submit_current_node_graph_evaluation(document, document_id, viewport_resolution, viewport_scale, time)
+		self.submit_current_node_graph_evaluation(document, document_id, viewport_resolution, physical_viewport_resolution, viewport_scale, time)
 	}
 
 	/// Evaluates a node graph for export
@@ -206,6 +209,8 @@ impl NodeGraphExecutor {
 				transform,
 				..Default::default()
 			},
+			// For export, logical and physical are the same (no HiDPI scaling)
+			physical_viewport_resolution: resolution,
 			scale: export_config.scale_factor,
 			time: Default::default(),
 			export_format,
@@ -420,9 +425,10 @@ impl NodeGraphExecutor {
 				}
 				let matrix = format_transform_matrix(frame.transform);
 				let transform = if matrix.is_empty() { String::new() } else { format!(" transform=\"{matrix}\"") };
+				// Mark viewport canvas with data attribute so it won't be cloned for repeated instances
 				let svg = format!(
-					r#"<svg><foreignObject width="{}" height="{}"{transform}><div data-canvas-placeholder="{}" data-physical-width="{}" data-physical-height="{}"></div></foreignObject></svg>"#,
-					frame.resolution.x, frame.resolution.y, frame.surface_id.0, frame.physical_resolution.x, frame.physical_resolution.y
+					r#"<svg><foreignObject width="{}" height="{}"{transform}><div data-canvas-placeholder="{}" data-is-viewport="true"></div></foreignObject></svg>"#,
+					frame.resolution.x, frame.resolution.y, frame.surface_id.0
 				);
 				self.last_svg_canvas = Some(frame);
 				responses.add(FrontendMessage::UpdateDocumentArtwork { svg });

editor/src/node_graph_executor/runtime.rs

@@ -290,7 +290,7 @@ impl NodeRuntime {
 
 							// Use logical resolution for CSS sizing, physical resolution for the actual surface/texture
 							let logical_resolution = render_config.viewport.resolution;
-							let physical_resolution = (logical_resolution.as_dvec2() * render_config.scale).as_uvec2();
+							let physical_resolution = render_config.physical_viewport_resolution;
 
 							// Blit the texture to the surface
 							let mut encoder = executor.context.device.create_command_encoder(&vello::wgpu::CommandEncoderDescriptor {

frontend/src/components/panels/Document.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, onMount, tick } from "svelte";
+	import { getContext, onMount, onDestroy, tick } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
 	import {
@@ -20,7 +20,7 @@
 	import type { DocumentState } from "@graphite/state-providers/document";
 	import { textInputCleanup } from "@graphite/utility-functions/keyboard-entry";
 	import { extractPixelData, rasterizeSVGCanvas } from "@graphite/utility-functions/rasterization";
-	import { updateBoundsOfViewports as updateViewport } from "@graphite/utility-functions/viewports";
+	import { setupViewportResizeObserver, cleanupViewportResizeObserver } from "@graphite/utility-functions/viewports";
 
 	import EyedropperPreview, { ZOOM_WINDOW_DIMENSIONS } from "@graphite/components/floating-menus/EyedropperPreview.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -209,18 +209,20 @@
 			const logicalWidth = parseInt(foreignObject.getAttribute("width") || "0");
 			const logicalHeight = parseInt(foreignObject.getAttribute("height") || "0");
 
-			// if (canvasName !== "0" && canvas.parentElement) {
-			// 	console.log("test");
-			// 	var newCanvas = window.document.createElement("canvas");
-			// 	var context = newCanvas.getContext("2d");
+			// Clone canvas for repeated instances (layers that appear multiple times)
+			// Viewport canvas is marked with data-is-viewport and should never be cloned
+			const isViewport = placeholder.hasAttribute("data-is-viewport");
+			if (!isViewport && canvas.parentElement) {
+				const newCanvas = window.document.createElement("canvas");
+				const context = newCanvas.getContext("2d");
 
-			// 	newCanvas.width = canvas.width;
-			// 	newCanvas.height = canvas.height;
+				newCanvas.width = canvas.width;
+				newCanvas.height = canvas.height;
 
-			// 	context?.drawImage(canvas, 0, 0);
+				context?.drawImage(canvas, 0, 0);
 
-			// 	canvas = newCanvas;
-			// }
+				canvas = newCanvas;
+			}
 
 			// Set CSS size to logical resolution (for correct display size)
 			canvas.style.width = `${logicalWidth}px`;
@@ -404,8 +406,8 @@
 		rulerHorizontal?.resize();
 		rulerVertical?.resize();
 
-		// Send the new bounds of the viewports to the backend
-		if (viewport.parentElement) updateViewport(editor);
+		// Note: Viewport bounds are now sent to the backend by the ResizeObserver in viewports.ts
+		// which provides pixel-perfect physical dimensions via devicePixelContentBoxSize
 	}
 
 	onMount(() => {
@@ -484,14 +486,21 @@
 			displayRemoveEditableTextbox();
 		});
 
-		// Once this component is mounted, we want to resend the document bounds to the backend via the resize event handler which does that
-		window.dispatchEvent(new Event("resize"));
+		// Setup ResizeObserver for pixel-perfect viewport tracking with physical dimensions
+		// This must happen in onMount to ensure the viewport container element exists
+		setupViewportResizeObserver(editor);
 
+		// Also observe the inner viewport for canvas sizing and ruler updates
 		const viewportResizeObserver = new ResizeObserver(() => {
 			updateViewportInfo();
 		});
 		if (viewport) viewportResizeObserver.observe(viewport);
 	});
+
+	onDestroy(() => {
+		// Cleanup the viewport resize observer
+		cleanupViewportResizeObserver();
+	});
 </script>
 
 <LayoutCol class="document" on:dragover={(e) => e.preventDefault()} on:drop={dropFile}>

frontend/src/io-managers/input.ts

@@ -10,7 +10,6 @@ import { makeKeyboardModifiersBitfield, textInputCleanup, getLocalizedScanCode }
 import { operatingSystem } from "@graphite/utility-functions/platform";
 import { extractPixelData } from "@graphite/utility-functions/rasterization";
 import { stripIndents } from "@graphite/utility-functions/strip-indents";
-import { updateBoundsOfViewports } from "@graphite/utility-functions/viewports";
 
 const BUTTON_LEFT = 0;
 const BUTTON_MIDDLE = 1;
@@ -43,7 +42,6 @@ export function createInputManager(editor: Editor, dialog: DialogState, portfoli
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	const listeners: { target: EventListenerTarget; eventName: EventName; action: (event: any) => void; options?: AddEventListenerOptions }[] = [
-		{ target: window, eventName: "resize", action: () => updateBoundsOfViewports(editor) },
 		{ target: window, eventName: "beforeunload", action: (e: BeforeUnloadEvent) => onBeforeUnload(e) },
 		{ target: window, eventName: "keyup", action: (e: KeyboardEvent) => onKeyUp(e) },
 		{ target: window, eventName: "keydown", action: (e: KeyboardEvent) => onKeyDown(e) },
@@ -529,8 +527,6 @@ export function createInputManager(editor: Editor, dialog: DialogState, portfoli
 
 	// Bind the event listeners
 	bindListeners();
-	// Resize on creation
-	updateBoundsOfViewports(editor);
 
 	// Return the destructor
 	return unbindListeners;

frontend/src/utility-functions/viewports.ts

@@ -1,12 +1,56 @@
 import { type Editor } from "@graphite/editor";
 
-export function updateBoundsOfViewports(editor: Editor) {
-	const viewports = Array.from(window.document.querySelectorAll("[data-viewport-container]"));
+let resizeObserver: ResizeObserver | undefined;
+
+export function setupViewportResizeObserver(editor: Editor) {
+	// Clean up existing observer if any
+	if (resizeObserver) {
+		resizeObserver.disconnect();
+	}
 
+	const viewports = Array.from(window.document.querySelectorAll("[data-viewport-container]"));
 	if (viewports.length <= 0) return;
 
-	const bounds = viewports[0].getBoundingClientRect();
-	const scale = window.devicePixelRatio || 1;
+	const viewport = viewports[0] as HTMLElement;
+
+	resizeObserver = new ResizeObserver((entries) => {
+		for (const entry of entries) {
+			const devicePixelRatio = window.devicePixelRatio || 1;
+
+			// Get exact device pixel dimensions from the browser
+			// Use devicePixelContentBoxSize for pixel-perfect rendering with fallback for Safari
+			let physicalWidth: number;
+			let physicalHeight: number;
+
+			if (entry.devicePixelContentBoxSize && entry.devicePixelContentBoxSize.length > 0) {
+				// Modern browsers (Chrome, Firefox): get exact device pixels from the browser
+				physicalWidth = entry.devicePixelContentBoxSize[0].inlineSize;
+				physicalHeight = entry.devicePixelContentBoxSize[0].blockSize;
+			} else {
+				// Fallback for Safari: calculate from contentBoxSize and devicePixelRatio
+				physicalWidth = entry.contentBoxSize[0].inlineSize * devicePixelRatio;
+				physicalHeight = entry.contentBoxSize[0].blockSize * devicePixelRatio;
+			}
+
+			// Get logical dimensions from contentBoxSize (these may be fractional pixels)
+			const logicalWidth = entry.contentBoxSize[0].inlineSize;
+			const logicalHeight = entry.contentBoxSize[0].blockSize;
+
+			// Get viewport position
+			const bounds = entry.target.getBoundingClientRect();
+
+			// Send both logical and physical dimensions to the backend
+			// Logical dimensions are used for CSS/SVG sizing, physical for GPU textures
+			editor.handle.updateViewport(bounds.x, bounds.y, logicalWidth, logicalHeight, devicePixelRatio, physicalWidth, physicalHeight);
+		}
+	});
+
+	resizeObserver.observe(viewport);
+}
 
-	editor.handle.updateViewport(bounds.x, bounds.y, bounds.width, bounds.height, scale);
+export function cleanupViewportResizeObserver() {
+	if (resizeObserver) {
+		resizeObserver.disconnect();
+		resizeObserver = undefined;
+	}
 }

frontend/wasm/src/editor_api.rs

@@ -518,8 +518,16 @@ impl EditorHandle {
 
 	/// Send new viewport info to the backend
 	#[wasm_bindgen(js_name = updateViewport)]
-	pub fn update_viewport(&self, x: f64, y: f64, width: f64, height: f64, scale: f64) {
-		let message = ViewportMessage::Update { x, y, width, height, scale };
+	pub fn update_viewport(&self, x: f64, y: f64, width: f64, height: f64, scale: f64, physical_width: f64, physical_height: f64) {
+		let message = ViewportMessage::Update {
+			x,
+			y,
+			width,
+			height,
+			scale,
+			physical_width,
+			physical_height,
+		};
 		self.dispatch(message);
 	}
 

node-graph/libraries/application-io/src/lib.rs

@@ -239,6 +239,8 @@ pub struct TimingInformation {
 #[derive(Debug, Default, Clone, Copy, PartialEq, DynAny, serde::Serialize, serde::Deserialize)]
 pub struct RenderConfig {
 	pub viewport: Footprint,
+	/// Physical viewport resolution in device pixels (from ResizeObserver's devicePixelContentBoxSize)
+	pub physical_viewport_resolution: UVec2,
 	pub scale: f64,
 	pub export_format: ExportFormat,
 	pub time: TimingInformation,