fix: draw the canvas at the screen's pixel density (#263)

Author: dazzatronus

src/components/canvas/shotstack-canvas.ts

@@ -172,8 +172,8 @@ export class Canvas {
 			this.currentZoom = Math.min(Math.max(newZoom, this.minZoom), this.maxZoom);
 
 			const stageCenter = {
-				x: this.application.canvas.width / 2,
-				y: this.application.canvas.height / 2
+				x: this.viewportSize.width / 2,
+				y: this.viewportSize.height / 2
 			};
 
 			const distanceFromCenter = {
@@ -239,9 +239,10 @@ export class Canvas {
 			return;
 		}
 
+		// In CSS pixels: the canvas element's own width counts device pixels.
 		this.viewportContainer.position = {
-			x: this.application.canvas.width / 2 - (this.edit.size.width * this.currentZoom) / 2,
-			y: this.application.canvas.height / 2 - (this.edit.size.height * this.currentZoom) / 2
+			x: this.viewportSize.width / 2 - (this.edit.size.width * this.currentZoom) / 2,
+			y: this.viewportSize.height / 2 - (this.edit.size.height * this.currentZoom) / 2
 		};
 
 		this.syncContentTransforms();
@@ -380,7 +381,9 @@ export class Canvas {
 			target,
 			...(frame ? { frame } : {}),
 			format: pixiFormat,
-			quality: options.quality ?? 0.85
+			quality: options.quality ?? 0.85,
+			// Captures stay in output pixels whatever the screen's density.
+			resolution: 1
 		});
 	}
 
@@ -623,6 +626,9 @@ export class Canvas {
 			width: this.viewportSize.width,
 			height: this.viewportSize.height,
 			antialias: true,
+			// Draws at the screen's pixel density, so text and frames stay sharp on phones and retina screens. 2 caps the fill cost on 3x phones.
+			resolution: Math.min(window.devicePixelRatio || 1, 2),
+			autoDensity: true,
 			powerPreference: "high-performance",
 			eventFeatures: {
 				globalMove: true, // Required for drag handling in SelectionHandles

tests/capture-frame.test.ts

@@ -87,4 +87,33 @@ describe("Canvas.captureFrame", () => {
 		expect(ticker.start).not.toHaveBeenCalled();
 		expect(ticker.started).toBe(false);
 	});
+
+	it("captures output pixels whatever the screen's density", async () => {
+		const { canvas } = setup();
+		const { base64 } = (canvas as unknown as { application: { renderer: { extract: { base64: jest.Mock } } } }).application.renderer.extract;
+
+		await canvas.captureFrame();
+
+		expect(base64).toHaveBeenCalledWith(expect.objectContaining({ resolution: 1 }));
+	});
+});
+
+describe("Canvas.centerEdit", () => {
+	it("centres in CSS pixels when the canvas element is drawn at twice that density", () => {
+		const viewportContainer = { position: point(0, 0), scale: point(0.2, 0.2) };
+		const canvas = Object.create(Canvas.prototype) as Canvas;
+		Object.assign(canvas, {
+			edit: { size: { width: 1920, height: 1080 } },
+			application: { canvas: { width: 800, height: 600 } },
+			viewportSize: { width: 400, height: 300 },
+			currentZoom: 0.2,
+			viewportContainer,
+			overlayContainer: { position: point(0, 0), scale: point(1, 1) },
+			uiController: null
+		});
+
+		canvas.centerEdit();
+
+		expect(viewportContainer.position).toMatchObject({ x: 400 / 2 - (1920 * 0.2) / 2, y: 300 / 2 - (1080 * 0.2) / 2 });
+	});
 });