Fix the problem of resetting HtmlCanvas.ClientXXX when call canvas.resizeByClientSize()

[cptbtptpbcptdtptp]

Demo:

    <style>
      html,
      body,
      canvas {
        width: 100%;
        /* Deliberately not setting the height */
        /* height: 100%; */
        margin: 0;
        overflow: hidden;
        background: black;
        border: none;
      }
    </style>

const canvas = document.getElementById("canvas") as HTMLCanvasElement;
console.log("before size", canvas.width, canvas.height);
console.log("before clientSize", canvas.clientWidth, canvas.clientHeight);
canvas.width = canvas.clientWidth * window.devicePixelRatio;
console.log("after size", canvas.width, canvas.height);
console.log("after clientSize", canvas.clientWidth, canvas.clientHeight);

output

[zhuxudong]

why not just this.width = *

[GuoLei1990]

Write comments