Skip to content

fix(addon-image): use device pixel dimensions for HiDPI rendering#5775

Draft
mgabor3141 wants to merge 1 commit intoxtermjs:masterfrom
mgabor3141:fix/image-addon-hidpi-pr
Draft

fix(addon-image): use device pixel dimensions for HiDPI rendering#5775
mgabor3141 wants to merge 1 commit intoxtermjs:masterfrom
mgabor3141:fix/image-addon-hidpi-pr

Conversation

@mgabor3141
Copy link
Copy Markdown

The image addon canvas is sized using CSS pixel dimensions, ignoring devicePixelRatio. On HiDPI displays images render at lower resolution, appearing blurry.

Fix: use dimensions.device.* for the canvas backing store and all draw/clear coordinates, while setting canvas.style.width/height to CSS dimensions for display sizing.

Fixes #5035

The image addon canvas was sized using CSS pixel dimensions, ignoring
devicePixelRatio. On HiDPI displays this caused images to render at
half (or less) resolution, appearing blurry compared to native terminal
emulators.

Fix by:
- Using dimensions.device.* for canvas backing store size and all
  draw/clear coordinates (cell size, canvas size)
- Setting canvas.style.width/height to CSS dimensions for display
- This matches how the WebGL renderer handles DPR scaling
@jerch
Copy link
Copy Markdown
Member

jerch commented Apr 30, 2026

@mgabor3141 I looked at your PR - You sure this works correctly and prints the image at the correct size? You basically just increased the canvas internal size, so with a DPR of 2 wouldn't images get rendered half as big?

Don't we need a transform or scale adjustment on the context like this:

ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
// or
ctx.scale(dpr, dpr);

Note that we have to stay in the DPR 1 assumption for image pixels, as image sequences currently have no way to tell us that a different DPR was targeted. Thus an image pixel must be treated as one CSS pixel.

Edit: Another way would be to do the CSS --> device pixels resizing on the image prehand, this way we would get less rounding artifacts (given that DPR is usually >1).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Terminal Image display has low resolution

2 participants