JSFiddle - React, Tailwind, and code Playground

HTML

<section>
<h1>Normal Resolution</h1>
<p>These items are displayed at the same size as their data (when unzoomed).</p>
<img src="http://phrogz.net/tmp/alphaball-small.png">
<canvas width="32" height="32"></canvas>
</section>

<section>
<h1>High Resolution</h1>
<p>These items are displayed at 1/4 of their data; when zoomed, they still appear smooth.</p>
<img src="http://phrogz.net/tmp/alphaball.png">
<canvas width="128" height="128"></canvas>
</section>

CSS

section { border:1px solid #666; margin:1em }
h1 { font-weight:bold; font-size:105%; font-family:sans-serif; border-bottom:1px solid #999 }
body { background:#eee; margin:2em 4em; text-align:center }
img, canvas { width:32px; height:32px }

JavaScript

var canvases = document.getElementsByTagName('canvas');
var ctx1 = canvases[0].getContext('2d'),
    ctx2 = canvases[1].getContext('2d');

function drawDiamond(ctx){
    ctx.strokeStyle='red';
    ctx.lineWidth=2;
    ctx.translate(16,6);
    ctx.rotate(Math.PI/4);
    ctx.fillRect(0,0,16,16);
    ctx.strokeRect(0,0,16,16);
}

drawDiamond(ctx1);

ctx2.scale(4,4);
drawDiamond(ctx2);