SOURCE

// 获取设备的 pixel ratio
var getPixelRatio = function(context) {
    var backingStore = context.backingStorePixelRatio ||
        context.webkitBackingStorePixelRatio ||
        context.mozBackingStorePixelRatio ||
        context.msBackingStorePixelRatio ||
        context.oBackingStorePixelRatio ||
        context.backingStorePixelRatio || 1;
    		console.log('backingStore', backingStore, window.devicePixelRatio);
    return (window.devicePixelRatio || 1) / backingStore;
};
        // 初始化canvas
function initCanvas(tpl, selector, callback) {
            var img;
            var canvas;
            var ctx;
            var ratio;

            canvas = tpl.find(selector)[0];
            ctx = canvas.getContext('2d');
            ratio = getPixelRatio(ctx);
            // canvas.style.width = canvas.width + 'px';
            // canvas.style.height = canvas.height + 'px';
            img = new Image();
            // 这里的canvas是做过处理的canvas，所以的方法和属性值已经是原来的ratio倍了，需要还原回来。
            // img的大小需要为图片大小的一半，正好是最初设置的canvas的大小
            img.width = canvas.width / ratio;
            img.height = canvas.height / ratio;
            // canvas.width = canvas.width * ratio;
            // canvas.height = canvas.height * ratio;
            console.log('ratio', ratio)
            console.log(canvas.width)
            img.addEventListener('load', function() {
                ctx.drawImage && ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                ctx.fillStyle = '#fc5f16';
                ctx.font = '15px serif';
                // 必须同时设置center和canvas.width / 2。至于为什么要乘ratio，和上面一样。
                ctx.textAlign = 'center';               
                ctx.fillText('刮开有惊喜 免费送大礼', canvas.width / (2 * ratio), 25);
                ctx.globalCompositeOperation = 'destination-out'; // 重点

                // 这里这么做是为了在移除事件的时候，保证是同一个事件，原因是这里bind了。
                startFun = startFun.bind(null, canvas);
                moveFunc = moveFunc.bind(null, canvas, ctx, ratio);
                endFunc = endFunc.bind(null, canvas, ctx);

                canvas.addEventListener('touchstart', startFun, false);
                canvas.addEventListener('touchmove', moveFunc, false);
                canvas.addEventListener('touchend', endFunc, false);

                callback();
            });
            console.log(png);
            img.src = png;
        }

<canvas id="scratchcard-cvs" width="202" height="96"></canvas>