Resize Viewport

Canvas drawing buffer size and WebGL viewport are synchronized so rendering stays sharp after layout changes.

Program

The canvas CSS size and drawing buffer size are separate. WebGL needs viewport dimensions that match the drawing buffer.

resize_viewport.html

<canvas id="gl" style="width: 320px; height: 180px"></canvas>
<script>
  const canvas = document.querySelector("#gl");
  const gl = canvas.getContext("webgl");
  canvas.width = canvas.clientWidth * devicePixelRatio;
  canvas.height = canvas.clientHeight * devicePixelRatio;
  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.clear(gl.COLOR_BUFFER_BIT);
</script>

drawing buffer canvas.width and canvas.height set the bitmap resolution.

viewport viewport maps normalized device coordinates to drawing buffer pixels.