JSFiddle - React, Tailwind, and code Playground

by Don Hatch

HTML

<p>This one is blurry:
<canvas width="100" height="40"></canvas>
<p>This one should have clear magnified pixels:
<canvas id="clarify_me" width="100" height="40"></canvas>

CSS

body { background:#eee; margin:2em; text-align:center }
canvas { background:#fff; border:1px solid #ccc; width:400px; height:160px }
canvas#clarify_me { image-rendering:pixelated }

JavaScript

Array.prototype.slice.call(document.getElementsByTagName('canvas')).forEach(function(c) {
  var ctx = c.getContext('2d');
  ctx.lineWidth   = 1;
  ctx.strokeStyle = '#f00';
  ctx.fillStyle   = '#eff';

  ctx.fillRect(  10.5, 10.5, 20, 20 );
  ctx.strokeRect( 10.5, 10.5, 20, 20 );
  ctx.fillRect(   40, 10.5, 20, 20 );
  ctx.strokeRect( 40, 10.5, 20, 20 );
  ctx.fillRect(   70, 10, 20, 20 );
  ctx.strokeRect( 70, 10, 20, 20 );

  ctx.strokeStyle = '#fff';
  ctx.strokeRect( 10.5, 10.5, 20, 20 );
  ctx.strokeRect( 40, 10.5, 20, 20 );
  ctx.strokeRect( 70, 10, 20, 20 );
})