此文章为译文，作者：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
#具体差异
在拥有高清屏幕的Macbook Pro上，Safari与chrome的表现并不相同。Safari上webkitBackingStorePixelRatio的值是2，devicePoxelRatio的值也是2，但是在chrome上webkitBackingStorePixelRatio的值是1，devicePoxelRatio的值是2。也就是说在Safari上我们的图形会自动以一种清晰的方式呈现，而在chrome上他是被模糊的。
所以我们会发问，为什么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);
}
