High Def Demo

Canvas need to config devicePixelRatio

by csvwolf

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