JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Naive canvas</h2>
<canvas id="naive" width="400" height="50"></canvas>

<h2>High-def Canvas</h2>
<canvas id="hidef" width="400" height="50"></canvas>

JavaScript

$(document).ready(function() {
    
    // Output to Canvas without consideration of device pixel ratio
    var naiveContext = $('#naive')[0].getContext('2d');    
    naiveContext.font = '16px Palatino';
    naiveContext.fillText('Rothko is classified as an abstract expressionist.', 10, 20);
    
    // Output to Canvas, taking into account devices such as iPhone 4 with Retina Display
    var hidefCanvas = $('#hidef')[0];
    var hidefContext = hidefCanvas.getContext('2d');
    
    if (window.devicePixelRatio) {
        var hidefCanvasWidth = $(hidefCanvas).attr('width');
        var hidefCanvasHeight = $(hidefCanvas).attr('height');
        var hidefCanvasCssWidth = hidefCanvasWidth;
        var hidefCanvasCssHeight = hidefCanvasHeight;
        
        $(hidefCanvas).attr('width', hidefCanvasWidth * window.devicePixelRatio);
        $(hidefCanvas).attr('height', hidefCanvasHeight * window.devicePixelRatio);
        $(hidefCanvas).css('width', hidefCanvasCssWidth);
        $(hidefCanvas).css('height', hidefCanvasCssHeight);
        hidefContext.scale(window.devicePixelRatio, window.devicePixelRatio);               
    }
    
    hidefContext.font = "16px Palatino";
    hidefContext.fillText("Rothko is classified as an abstract expressionist.", 10, 20);
});