High DPI Canvas 高分辨率Canvas（译）

此文章为译文，作者：Paul Lewis 写于：2012-8-25
原文地址：http://www.html5rocks.com/en/tutorials/canvas/hidpi/?redirect_from_locale=zh
由于原文编写时间已经比较久远，BackingStorePixelRatio属性已经被弃用了，所以本文做一些修改。
感谢 @玄魂 的提醒。

序

HIDPI屏幕是一个非常棒的东西，他让一切变得清晰。这也让我们开发者遇到了一些新的挑战。在本文中，我们将研究在如何在HIDPI的屏幕上使用canvas绘制高清的图片。

设备像素比(window.devicePixelRatio)

让我们开始吧！回到之前谈到的，HIDPI的屏幕上的像素（逻辑像素），我们可以当做是正常的像素（css中设置的像素），你可以正常使用它。如果你画一个100px的东西，他也就是一个100px的东西。但是，在出现了一些高分辨率屏幕的手机之后，一个属性devicePixelRatio就一起出现了。它允许我们去查询设备像素比。在这里我们需要抛出一个名词逻辑像素，也就是在css设置的100px时，在iphone4S(devicePixelRatio为2)上，实际渲染的是200px的物理像素。

这个属性是非常有意思的。但是这对于我们开发者的影响是什么呢？早些时候，我们注意到当我们向这种高分辨率的屏幕添加img的时候，我们的图形受到devicePixelRatio的影响变得非常模糊。
如何解决这个问题呢？我发现如果我把img的宽和高分别与devicePixelRatio相乘，得到的大小画进屏幕中，在对齐进行缩放devicePixelRatio的大小。Img就会以一种高清的方式呈现。

BackingStorePixelRatio（此属性已被弃用，详情查阅）

那么在canvas中是怎么样的呢？在桌面版chrmoe与safari6会有不同的表现。并且在这里又需要抛出一个新的名词webkitBackingStorePixelRatio。目前只在webkit上出现（2012年。2016年5月27测试，只有Safari有这个属性。。。。），火狐与微软可能在未来支持。
简单的说BackingStorePixelRatio就告诉浏览器canvas背后的缓存区的像素比。如果我们说一张图片的宽度为200px但是webkitBackingStorPixelRatio为2。在canvas缓存区中真的数据九尾400px。

canvas-backingstore.png

#具体差异
在拥有高清屏幕的Macbook Pro上，Safari与chrome的表现并不相同。Safari上webkitBackingStorePixelRatio的值是2，devicePoxelRatio的值也是2，但是在chrome上webkitBackingStorePixelRatio的值是1，devicePoxelRatio的值是2。也就是说在Safari上我们的图形会自动以一种清晰的方式呈现，而在chrome上他是被模糊的。

chrome与Safari的显示差异

所以我们会发问，为什么chrome不能与Safari一样自动适应高清的图形输出呢？

实现

所以我们只能自己去适应。解决的办法也想到简单

upsize your canvas width and height by devicePixelRatio / webkitBackingStorePixelRatio and then use CSS to scale it back down to the logical pixel size you want.

放大devicePixelRatio 倍canvas的宽高，然后用css在缩小回到你想要的理想像素。就比如，之前我们了解到高清屏幕设备的chrome中devicePixelRatio = 2。所以将canvas的宽和高会放大 2 被，相当于 * 2。然后使用css缩放会原来的大小。
最后我们需要考虑到，我们手动把画布放大了2倍，又通过css把他的样式大小缩放回去原来的大小。这里会造成画布里的图形有缩放的问题，所以我们需要缩放回去。
具体的代码如

/**
 * Writes an image into a canvas taking into
 * account the backing store pixel ratio and
 * the device pixel ratio.
 *
 * @author Paul Lewis
 * @param {Object} opts The params for drawing an image to the canvas
 */
function drawImage(opts) {

    if(!opts.canvas) {
        throw("A canvas is required");
    }
    if(!opts.image) {
        throw("Image is required");
    }

    // get the canvas and context
    var canvas = opts.canvas,
        context = canvas.getContext('2d'),
        image = opts.image,

    // now default all the dimension info
        srcx = opts.srcx || 0,
        srcy = opts.srcy || 0,
        srcw = opts.srcw || image.naturalWidth,
        srch = opts.srch || image.naturalHeight,
        desx = opts.desx || srcx,
        desy = opts.desy || srcy,
        desw = opts.desw || srcw,
        desh = opts.desh || srch,
        auto = opts.auto,

    // finally query the various pixel ratios
        devicePixelRatio = window.devicePixelRatio || 1,
    // backingStoreRatio此属性已被弃用
    //  backingStoreRatio = context.webkitBackingStorePixelRatio ||
                            context.mozBackingStorePixelRatio ||
                            context.msBackingStorePixelRatio ||
                            context.oBackingStorePixelRatio ||
                            context.backingStorePixelRatio || 1,

       // ratio = devicePixelRatio / backingStoreRatio;
          ratio = devicePixelRatio;

    // ensure we have a value set for auto.
    // If auto is set to false then we
    // will simply not upscale the canvas
    // and the default behaviour will be maintained
    if (typeof auto === 'undefined') {
        auto = true;
    }

    // upscale the canvas if the two ratios don't match
    // if (auto && devicePixelRatio !== backingStoreRatio) {
    if (auto && devicePixelRatio) {
        var oldWidth = canvas.width;
        var oldHeight = canvas.height;

        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
        context.scale(ratio, ratio);

    }

    context.drawImage(pic, srcx, srcy, srcw, srch, desx, desy, desw, desh);
}