JSFiddle - React, Tailwind, and code Playground

HTML

<p>High resolution canvas</p>

<p id="d2"></p>

JavaScript

/*
Instructions: Zoom in with the browser (Firefox or Chrome) until you have a fractional device pixel ratio, and then refresh the page, and view the result.

You will see bad rendering in the green box due to sub-pixel issues and hopefully fixed rendering in the red box due to a fudge factor added to it.

*/
    
    
function makeHighRes(c) {
    var ctx = c.getContext('2d');
    // finally query the various pixel ratios
    var devicePixelRatio = window.devicePixelRatio || 1;
    var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
        ctx.mozBackingStorePixelRatio ||
        ctx.msBackingStorePixelRatio ||
        ctx.oBackingStorePixelRatio ||
        ctx.backingStorePixelRatio || 1;
    var ratio = devicePixelRatio / backingStoreRatio;
    // upscale canvas if the two ratios don't match
    if (devicePixelRatio !== backingStoreRatio) {
    
        var oldWidth = c.width;
        var oldHeight = c.height;
        c.width = Math.round(oldWidth * ratio);
        c.height = Math.round(oldHeight * ratio);
        c.style.width = oldWidth + 'px';
        c.style.height = oldHeight + 'px';
        // now scale the context to counter
        // the fact that we've manually scaled
        // our canvas element
        ctx.scale(ratio, ratio);
    }
}


var a1=dojo.create('div',{id:"a1"},document.body);
var a2=dojo.create('div',{id:"a2"},document.body);
var a3=dojo.create('div',{id:"a3"},document.body);


var a=dojo.create('canvas', { width: "200", height: "100" },a1);
var b=dojo.create('canvas', { width: "200", height: "100" },a2);
var c=dojo.create('canvas', { width: "200", height: "100" },a3);


dojo.byId("d2").innerHTML="devicePixelRatio: "+window.devicePixelRatio;


makeHighRes(a);
makeHighRes(b);
makeHighRes(c);


var atx = a.getContext('2d');
atx.fillStyle='red';
var btx = b.getContext('2d');
btx.fillStyle='blue';
var ctx = c.getContext('2d');
ctx.fillStyle='green';


// Red block (fudge factor)
for(var i=0; i<a.width; i++) {
    atx.fillRect( i,...