Graphics offset problem for high resolution canvas

To generate high-resolution images I’m using a very large canvas scaled with CSS. The problem is that the graphics are drawn offset. Raycasting intersections still trigger in the spot where the model should be, but the model itself is shown shifted to the top-right corner. The larger the canvas the larger the shift. There’s no shift for using render_width = canvas_container.clientWidth * window.devicePixelRatio, but any size over that increases the offset exponentially.

My canvas size is controlled by CSS:

max-width: 100% !important;
max-height: 100% !important;
width: unset !important;
height: unset !important;

The above rules were needed to override the automatic setting of canvas.style.width whenever setting canvas.width (idem height).

I’m using the following (simplified, but still very long, sorry) function to set the size:

function set_sizes() {
	// viewport is the container element for the canvas
	const viewport_width = viewport.clientWidth * window.devicePixelRatio;
	const viewport_height = viewport.clientHeight * window.devicePixelRatio;
	
	const viewport_ar = viewport_width / viewport_height;

	if (params.maxQ) {
		if (image_ar > 1) {
			render_width = maxRenderSize; // = Math.min(renderer.capabilities.maxTextureSize, 8192)
			render_height = maxRenderSize / image_ar; // image_ar is a fixed aspect ratio
		} else if (image_ar < 1) {
			render_width = maxRenderSize * image_ar;
			render_height = maxRenderSize;
		} else {
			render_width = maxRenderSize;
			render_height = maxRenderSize;
		}
	} else {
		if (image_ar > viewport_ar) {
			render_width = viewport_width;
			render_height = viewport_width / image_ar;
		} else if (image_ar < viewport_ar) {
			render_width = viewport_height * image_ar;
			render_height = viewport_height;
		} else {
			render_width = viewport_width;
			render_height = viewport_height;
		}
	}

	render_width = Math.round(render_width);
	render_height = Math.round(render_height);
	
	canvas.setAttribute('width', render_width);
	canvas.setAttribute('height', render_height);

	renderer.setSize(render_width, render_height);

	camera.aspect = image_ar;
	camera.updateProjectionMatrix();

	using_max_q = params.maxQ;
	need_render = true;
}

When disabling maxQ and thus setting a typical canvas size all works and renders okay. But when setting the canvas to high resolution the offset occurs.
I’m using intersectsObjects to add markers (spheres), which works fine at normal resolution. At maxQ the intersections trigger only for where the model should be, not where it’s drawn. The markers show up in the offset location. Setting the resolution to low again will show the markers in the right place on the model surface.

How can I fix this?

I’m also having this problem! I wanted to give this a bump since maybe someone else could have a solution to it.

I’m also scaling my canvas with css in the same way you are, and setting the render size as another value that’s much larger than the screen size in pixels.