diff --git a/js/regl/main.js b/js/regl/main.js
index df5b876..9caec17 100644
--- a/js/regl/main.js
+++ b/js/regl/main.js
@@ -38,8 +38,9 @@ export default async (canvas, config) => {
 	await Promise.all([loadJS("lib/regl.min.js"), loadJS("lib/gl-matrix.js")]);
 
 	const resize = () => {
-		canvas.width = Math.ceil(canvas.clientWidth * config.resolution);
-		canvas.height = Math.ceil(canvas.clientHeight * config.resolution);
+		const devicePixelRatio = window.devicePixelRatio ?? 1;
+		canvas.width = Math.ceil(canvas.clientWidth * devicePixelRatio * config.resolution);
+		canvas.height = Math.ceil(canvas.clientHeight * devicePixelRatio * config.resolution);
 	};
 	window.onresize = resize;
 	if (document.fullscreenEnabled || document.webkitFullscreenEnabled) {
@@ -75,7 +76,7 @@ export default async (canvas, config) => {
 			break;
 	}
 
-	const regl = createREGL({ canvas, extensions, optionalExtensions });
+	const regl = createREGL({ canvas, pixelRatio: 1, extensions, optionalExtensions });
 
 	const cameraTex = regl.texture(cameraCanvas);
 	const lkg = await getLKG(config.useHoloplay, true);
diff --git a/js/webgpu/main.js b/js/webgpu/main.js
index 205d8ed..aa5ce42 100644
--- a/js/webgpu/main.js
+++ b/js/webgpu/main.js
@@ -115,8 +115,8 @@ export default async (canvas, config) => {
 		}
 
 		const devicePixelRatio = window.devicePixelRatio ?? 1;
-		const canvasWidth = canvas.clientWidth * devicePixelRatio;
-		const canvasHeight = canvas.clientHeight * devicePixelRatio;
+		const canvasWidth = Math.ceil(canvas.clientWidth * devicePixelRatio * config.resolution);
+		const canvasHeight = Math.ceil(canvas.clientHeight * devicePixelRatio * config.resolution);
 		const canvasSize = [canvasWidth, canvasHeight];
 		if (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {
 			canvas.width = canvasWidth;