Does Paper.js work with Retina or other high definition displays?

Question

I'm trying to decide between Raphaël and Paper.js. I've chosen Paper.js, however, now I'm reading in several places it doesn't work well with Retina or high definition displays. At least it used to not. Raphaël seems to naturally work perfect as it's SVG based. Have the Retina issues been fixed with Paper.js or were there never really issues? Are there easy workarounds?

Answer 1

High DPI support was set to off by default and you had had to activate it because there were some issues. Now most of them should be resolved so the latest paper.js has HiDPI set to on by default.

If you are still using an older version you can turn it on like so:

<canvas id="canvas" hidpi="on"></canvas>

but this would not be needed with the latest build.

Answer 2

The hidpi setting unfortunately did nothing for me. I had to set the image directly to the width and height of the canvas like so

var mergedContext = mergedCanvas[0].getContext('2d');
mergedContext.fillStyle = 'rgb(255, 255, 255)';
mergedContext.fillRect(0, 0, totalWidth, totalHeight);

// This line is the secret
mergedContext.drawImage(canvasData, 0, canvasWidth, canvasHeight);

With that last line of code, it didn't matter how big the image was. It always resized to fit properly.

Answer 3

Use this style

html,
body {
    height: 100%;
}

/* Scale canvas with resize attribute to full size */
canvas[resize] {
    width: 100%;
    height: 100%;
} 

from here https://github.com/paperjs/paper.js/issues/662