JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<canvas></canvas>

JavaScript

var can = document.querySelector("canvas");
var ctx = can.getContext("2d");

var idealCssPx = 331; // arbitrary prime
can.style.width = can.style.height = idealCssPx + "px";
function draw(size) {
  can.width = can.height = size;
  for (var i = 0; i < size; i += 2) {
      ctx.fillRect(i, 0, 1, size);
  }
}
window.onresize = function() {
    var idealPhysicalPx = idealCssPx * window.devicePixelRatio
    var actualPhysicalPx = Math.ceil(idealPhysicalPx);
    draw(actualPhysicalPx);
    var actualCssPx = actualPhysicalPx / window.devicePixelRatio;
    can.style.width = can.style.height = actualCssPx + "px";
}
window.onresize();