HIDPI/Retina Plot Drawing?

jqplot

Solution

I figured it out based on the examples linked to in the question.

Replace

this.initCanvas = function(canvas) {
    if ($.jqplot.use_excanvas) {
        return window.G_vmlCanvasManager.initElement(canvas);
    }
    return canvas;
}

With

this.initCanvas = function(canvas) {
    if ($.jqplot.use_excanvas) {
        return window.G_vmlCanvasManager.initElement(canvas);
    }

    var cctx = canvas.getContext('2d');

    var canvasBackingScale = 1;
    if (window.devicePixelRatio > 1 && (cctx.webkitBackingStorePixelRatio === undefined || 
                                                cctx.webkitBackingStorePixelRatio < 2)) {
            canvasBackingScale = window.devicePixelRatio;
    }
    var oldWidth = canvas.width;
    var oldHeight = canvas.height;

    canvas.width = canvasBackingScale * canvas.width;
    canvas.height = canvasBackingScale * canvas.height;
    canvas.style.width = oldWidth + 'px';
    canvas.style.height = oldHeight + 'px';
    cctx.save();

    cctx.scale(canvasBackingScale, canvasBackingScale);

    return canvas;
};

That method can be found around line 290 in jquery.jqplot.js.

Then if you do not have a HIDPI or Retina display but do have a Mac you can use Quartz Debug and System Pref/Displays to simulate a HIDPI resolution for testing. Here is a composite screenshot showing normal graphing and the same graph with the replacement code.

Problem

I have seen 3 tickets on bitbucket asking about this over the last year but have never seen a definitive answer. One of those tickets gave some code, but I'm at a loss as to where that code belongs. ``` var devicePixelRatio = window.devicePixelRatio || 1, backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1; ratio = devicePixelRatio / backingStoreRatio; if (devicePixelRatio !== backingStoreRatio) { var oldWidth = canvas.width; var oldHeight = canvas.height; this.canvasOrigWidth = oldWidth; this.canvasOrigHeight = oldHeight; canvas.width = oldWidth * ratio; canvas.height = oldHeight * ratio; canvas.style.width = oldWidth + 'px'; canvas.style.height = oldHeight + 'px'; // now scale the context to counter // the fact that we've manually scaled // our canvas element ctx.scale(ratio, ratio); } ``` How do you get JQPlot to output high resolution graphs? Edit 1 The above code seems to have come from this website.

Original source