Clear Frame - WebGL

A WebGL canvas gets a context, chooses its viewport, stores a clear color, and then paints the framebuffer.

Program

WebGL is a state machine. Some calls configure future work, while draw and clear calls actually change pixels.

clear_frame.html

<canvas id="stage" width="360" height="210"></canvas>
<script>
  const gl = stage.getContext("webgl");
  gl.viewport(0, 0, stage.width, stage.height);
  gl.clearColor(0.07, 0.10, 0.18, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
</script>

WebGL context The WebGL context is the JavaScript object used to configure and draw with the GPU.

viewport The viewport maps clip-space coordinates into pixels in the drawing buffer.

framebuffer The framebuffer is the target pixel storage that clear and draw calls update.