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

Questions
1

here is my canvas in html:

image
image813×96 4.9 KB

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:
image
image643×638 43.9 KB

when I set width =512 and height = 1024, I got a blur frame like:
image
image573×921 36.8 KB

why and how to fix this?

2

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

3

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.

4

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.

1 Like