Terminal Image display has low resolution

[Tyriar]

From https://github.com/microsoft/vscode/issues/210672

Does this issue occur when all extensions are disabled?: Yes/No

• VS Code Version: 1.88.1
• OS Version: Mac: Universal Intel silicon

Steps to Reproduce:

1. imgcat "anyimage.png"

Original image:

In VScode terminal

In Iterm2 terminal

[jerch]

@Tyriar Whats the right way to scale a canvas to operate on real device pixels instead of css pixels? Should that be done on width/height attribute level of the canvas object?

For example - lets say we have a DPR of 2 at hand - where should that "doubled" pixel values go? Would this be sufficent (and the browser deals with the low level stuff on its own):

const canvasObj = ...
// apply real pixel values to canvas (doubled  here)
canvasObj.width = cssWidth * DPR;
canvasObj.height = cssHeight * DPR;
// output is still within the logical css pixels
canvasObj.style.width = cssWidth;
canvasObj.style.height = cssHeight;

// later on during painting:
canvasObj.drawImage(...<metrics here now in real device pixels>...);

Would that already fix things? (Sorry if that question looks dumb to you, but I've never done this DPR correction myself, also I cannot really test it...)

[tisilent]

@jerch I did the same thing,And there are also scenarios of DPR changes. https://github.com/xtermjs/xterm.js/blob/c73793fa115924a05235c687e1186bf370ec8ed1/src/browser/services/CoreBrowserService.ts#L18-L19

However, my scene is relatively simple without scaling, so CSS * DPR is sufficient. reference: https://github.com/xtermjs/xterm.js/blob/c73793fa115924a05235c687e1186bf370ec8ed1/src/browser/renderer/shared/TextureAtlas.ts#L667-L676