css - 当在 css 中设置画布大小时，WebGL 损坏了上下文

Question

在一个 WebGL 页面中，当我用像<canvas id="main-canvas" width="800px" height="600px"> </canvas> 这样的旧方式硬编码画布大小时，
一切看起来都很棒。但是将尺寸部分移动到 css 会产生非常像素化的图像，因为它以非常小的尺寸渲染然后被放大。我想这是因为我在页面加载时初始化了 webgl 上下文，但 css 稍后生效，所以 webgl 认为控件比实际要小。无论我的猜测是对还是错，我该如何解决？

Answer 1

I managed to fix this with the following code just before initializing the webgl context.

canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
this.gl = canvas.getContext("webgl"); 
... 

So it looks WebGL initiallizes the context based on the width and height while arguably it should do it on the client sizes.