image-rendering: pixelated webgl

by Gregg Tavares

HTML

<div class="pixelated">
  <pre>image-rendering: pixelated</pre>
  <div><canvas width="2" height="2" id="canvas2d"></canvas>canvas2d</div>
  <div><canvas width="2" height="2" id="webgl"></canvas>webgl</div>
  <div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEklEQVQI12P4z8Dw//9/EAYCADzRCfcSdj37AAAAAElFTkSuQmCC">img</div>
</div>
<div class="crisp">
  <pre>image-rendering: crisp-edges</pre>
  <div><canvas width="2" height="2" id="canvas2d"></canvas>canvas2d</div>
  <div><canvas width="2" height="2" id="webgl"></canvas>webgl</div>
  <div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEklEQVQI12P4z8Dw//9/EAYCADzRCfcSdj37AAAAAElFTkSuQmCC">img</div>
</div>

CSS

canvas, img {
  width: 64px; 
  height: 64px;
  border: 1px solid black;
  display: block;
}
.pixelated canvas, .pixelated img {
  image-rendering: pixelated;
}
.crisp canvas, .crisp img {
  image-rendering: crisp-edges;
}
div>div {
  display: inline-block;
  text-align: center;
  padding: 5px;
}

JavaScript

[...document.querySelectorAll('body>div')].forEach((group) => {
  {
    const ctx = group.querySelector('canvas').getContext('2d');
    ctx.fillStyle = '#F00';
    ctx.fillRect(0, 0, 1, 1);
  }
  {
    const gl = group.querySelector('#webgl').getContext('webgl');
    gl.clearColor(1, 0, 0, 1);
    gl.enable(gl.SCISSOR_TEST);
    gl.scissor(0, 1, 1, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
  }
});