I use canvas' size as my renderer size. but got low resolution when width not euqalss height size

here is my canvas in html:


here is how I got canvas size in js:
image
here is how I set renderer’s size:
image
when height and size both = 512, I got a clear rendering frame like:

when I set width =512 and height = 1024, I got a blur frame like:

why and how to fix this?

and I add a debug found that after I set the size(width =512, height=1024), the canvas seems to add them as “style” but the master is “width” and “height”.
image

Pixel ratio is not related to aspect ratio, it’s for high-DPI displays or other resolution adjustments. You probably want it to be 1, window.devicePixelRatio, or somewhere in between.

Try it like this:

function resize_canvas( x = 512, y = 1024 ) {
canvas.width = x;
canvas.height = y;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}

If that doesn’t solve the problem. a JSFiddle with minimum coding is required.