因為canvas不是矢量圖，而是像圖片一樣是位圖模式的。如果不做Retina屏適配的話，例如二倍屏，瀏覽器就會以2個像素點的寬度來渲染一個像素，該canvas在Retina屏幕下相當於占據了2倍的空間，相當於圖片被放大了一倍，因此圖片會變模糊。
因此，要做Retina屏適配，關鍵是知道當前canvas的實際渲染倍率，然后將canvas放大到該倍率來繪制，最后將canvas壓縮成一倍的物理大小來展示。
需要注意的是，canvas中的線條大小、文字大小等都需要乘以該倍率來進行繪制。
canvas的實際渲染倍率
在瀏覽器的window變量中有一個devicePixelRatio的屬性，該屬性表示了屏幕的設備像素比，即用幾個（通常是2個）像素點寬度來渲染1個像素。
在canvas context中也存在一個 webkitBackingStorePixelRatio 的屬性，該屬性的值決定了瀏覽器在渲染canvas之前會用幾個像素來來存儲畫布信息。在iOS6下的safari中的值是2，但是在chrome和iOS7的safari中的值卻是1。在iOS6下的safari中，如果有一張100 × 100像素的圖片繪制，該圖片首先會在內存中生成一張200 × 200的圖片，然后再瀏覽器渲染時會按100 × 100的圖片來顯示，因此不會出現模糊失真的情況。而在在chrome和iOS7的safari中就會出現模糊。
但是webkitBackingStorePixelRatio屬性在各瀏覽器廠商的獲取方式不一樣，所以需要加上瀏覽器前綴來實現兼容。
如下：
var canvas = document.getElementById("canvas"),
context= canvas.getContext("2d");
// 屏幕的設備像素比
var devicePixelRatio = window.devicePixelRatio || 1;
// 瀏覽器在渲染canvas之前存儲畫布信息的像素比
var backingStoreRatio = context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
// canvas的實際渲染倍率
var ratio = devicePixelRatio / backingStoreRatio;
3.2 按實際渲染倍率來縮放canvas
先補充一個基礎知識點：
要設置canvas的畫布大小，使用的是canvas.width 和 canvas.height；
要設置畫布的實際渲染大小，使用的style或CSS設置的 width 和height，只是簡單的對畫布進行縮放。
譬如：
<canvas width="640" height="800" style="width:320px; height:400px"></canvas>
canvas的實際大小的640px × 800px，但是實際渲染到頁面的大小是320px × 400px，相當於縮小一倍來顯示。
因此，要使canvas適配高倍屏，就是要將canvas放大到設備像素比來繪制，最后將canvas壓縮成一倍的物理大小來展示。如下：
canvas.style.width = canvas.width;
canvas.style.height = canvas.height;
canvas.width = canvas.width * ratio;
canvas.height = canvas.height * ratio;
canvas中的線條大小、文字大小等都需要乘以設備像素比來進行繪制，否則高倍屏下的線條會變細幾倍