preserveDrawingBuffer

by Gregg Tavares

HTML

<canvas></canvas>

CSS

body { margin: 0; background: black; }
canvas { width: 100vw; height: 100vh; }

JavaScript

var canvas = document.querySelector("canvas");
var gl = canvas.getContext("webgl", { preserveDrawingBuffer: true });

function r(max) {
  return Math.random() * max | 0;
}

function rf() {
  return Math.random() * 0.2 + 0.8;
}

function resize(gl) {
  var canvas = gl.canvas;
  var width = canvas.clientWidth;
  var height = canvas.clientHeight;
  if (canvas.width != width || canvas.height != height) {
    canvas.width = width;
    canvas.height = height;
    gl.viewport(0, 0, width, height);
  }
}

function render() {
  resize(gl);
  gl.enable(gl.SCISSOR_TEST);
  
  var w = canvas.width;
  var h = canvas.height;
  var x = r(w);
  var y = r(h);
  gl.scissor(x, y, r(w - x), r(h - y));
  gl.clearColor(rf(), rf(), rf(), 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
  requestAnimationFrame(render);
}
requestAnimationFrame(render);