在 mac 下的 chrome 当你按下 command + + 的时候会放大网页，这时 devicePixelRatio 会发生变化，默认情况下这个值为 1，当网页放大到 250% 时，这个值会变成 2.5。我们在 canvas 画图写字，就要处理 devicePixelRatio 这个变量的改变，这和高清屏是一样的道理。
下面是一个例子，如论你的 devicePixelRatio 是多少，文字和图片都可以正常显示。可以通过缩放网页，来修改此值。
根据 devicePixelRatio 做处理
他的核心代码如下：
var devicePixelRatio = window.devicePixelRatio || 1
var backingStoreRatio = context.backingStorePixelRatio || 1
var ratio = devicePixelRatio / backingStoreRatio
canvas.width = oldWidth * ratio;
canvas.height = oldHeight * ratio;不做处理
如果不做处理就会是下面这种效果。
完整的代码
See the Pen devicePixelRatio in canvas fillText by zeng (@zengxiaoluan) on CodePen.
有一些面试题会问 `drawImage` 能不能画不同域名（也就是跨域）下的图片，根据上面的例子，答案是可以的。
参考链接
- 高清屏中 Canvas 的绘制
- https://www.jianshu.com/p/03ed7933779d
- https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage
