JSFiddle - React, Tailwind, and code Playground

by yonatan

HTML

original
<canvas id="src"></canvas>
simple upscale
<canvas id="single"></canvas>
stage 2
<canvas id="stage2"></canvas>
stage 1
<canvas id="stage1"></canvas>

CSS

canvas {
  display: block;
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
}

JavaScript

let ctx = src.getContext('2d');
//let id = new ImageData(src.width = 8, src.height = 8);
//id.data.map((_, i, a) => a[i] = i % 4 == 3 ? 255 : Math.random() * 256);
//ctx.putImageData(id, 0, 0);
src.width = 8, src.height = 8
ctx.fillRect(2,2,1,1)

single.width = single.height = 4;
ctx = single.getContext('2d');
ctx.drawImage(src, 0, 0, 4, 4);

stage1.width = 4 * Math.SQRT2;
stage1.height = 4 * Math.SQRT2;
ctx = stage1.getContext('2d');
ctx.drawImage(src, 0, 0, stage1.width, stage1.height);

stage2.width = 4;
stage2.height = 4;
ctx = stage2.getContext('2d');
ctx.drawImage(stage1, 0, 0, stage2.width, stage2.height);