Show drawing 1x1 is impossible even using other method

by Gregg Tavares

HTML

<canvas></canvas>
<pre id="info"></pre>
<script src="https://twgljs.org/dist/3.x/twgl-full.min.js"></script>

CSS

body { margin: 0; }
canvas { display: block; }
#info { 
  margin: 0;
  position: absolute; 
  left: 1em; top: 1em; 
  padding: 0.5em; 
  background: rgba(0,0,0,.8); 
  color: white; 
}

JavaScript

"use strict";
const vs = `
attribute vec4 position;
void main() {
  gl_Position = position;
}
`;
const fs = `
precision mediump float;
void main() {
  gl_FragColor = vec4(mod(floor(gl_FragCoord.xy / 2.), 2.), 0, 1);
}
`;
const gl = document.querySelector("canvas").getContext("webgl");
const info = document.querySelector("#info");

// compiles shaders, link program, looks up locations
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);

// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each array
const bufferInfo = twgl.primitives.createXYQuadBufferInfo(gl);

function render() {
    const cssWidth = window.innerWidth;
    const cssHeight = window.innerHeight;
    const canvas = gl.canvas;
    
    // .. and then sizing the WebGL backbuffer size to that size..
    canvas.width = cssWidth * window.devicePixelRatio;
    canvas.height = cssHeight * window.devicePixelRatio;

    // .. and third, re-snapping back the CSS size of the canvas to match the chosen WebGL backbuffer size, will produce glitch free sizing.
    canvas.style.width = (canvas.width / window.devicePixelRatio) + 'px';
    canvas.style.height = (canvas.height / window.devicePixelRatio) + 'px';

  info.textContent = 
`devicePixelRatio: ${window.devicePixelRatio}
cssSize: ${gl.canvas.clientWidth}x${gl.canvas.clientHeight}
canvasSize: ${gl.drawingBufferWidth}x${gl.drawingBufferHeight}`;

   gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

  gl.useProgram(programInfo.program);
  // calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  twgl.drawBufferInfo(gl, bufferInfo);
}

render();
window.addEventListener('resize', render);