On updateEditorHiPPICanvas()

[liusida]

    updateEditorHiPPICanvas() {
        // updating the High-Performance Pixel Image (HiPPI) canvas
        const ratio = window.devicePixelRatio;
        // this is the ratio of the screen (Windows Settings) 125% = 1.25
        if (ratio == 1) {
            return;
        }
        const rect = this.canvas.parentNode.getBoundingClientRect();
        const { width, height } = rect;
        this.canvas.width = width * ratio;
        this.canvas.height = height * ratio;
        this.canvas.style.width = width + "px";
        this.canvas.style.height = height + "px";
        this.canvas.getContext("2d").scale(ratio, ratio);
        // return editor.canvas;
    }

I saw this code to make text and edges sharper on canvas when the user manually set the display scale to be larger than 100%, in my case, I set it to 150%.

But this causes inconsistency in the width and height of the canvas. In the following example, my div window in the browser is 444px height, but the canvas.height is set to be 666. If this is expected, it means the actual canvas is larger than the displayed area. Later new developers might take canvas.height to do further calculation, for example, drawing renderInfo, which will cause confusion. (I was debugging why exporting png will cause the resolution to change, it turns out that I was using canvas.height as the actual canvas height.)

[liusida]

also, a minor issue, the light blue box (indicating the workspace area, right) is drawed according to canvas.height, so one needs to move the canvas quite far to see the bottom edge.