JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>

CSS

* {
  
  margin:0;
  padding:0;
  
}

canvas {
  
  /*image-rendering:pixelated;*/
  height:100%;
  width:100%;
  
}

JavaScript

var context = document.querySelector('canvas').getContext('2d');

context.canvas.height = context.canvas.width = 20;

context.fillStyle = "#000000";
context.fillRect(0, 0, 20, 20);

context.imageSmoothingEnabled = false;
context.fillStyle = "#ff0000";

for (var i = 0; i < 20; i ++) {

  context.fillRect(i, i, 1, 1);

}