HTML5 Canvas - Rendering of Text on high-DPI screens

<html>
  <head>
    <script src='https://code.jquery.com/jquery-1.5.1.min.js'></script>
  </head>
  
  <body>
    <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>
  </body>

// 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 Palantino";
      hidefContext.fillText("Rothko is classified as an abstract expressionist.", 10, 20);
    });
    </script>
</html>

Modified http://code.jquery.com/jquery-1.5.1.min.js to a secure url

https://code.jquery.com/jquery-1.5.1.min.js