在cavnas上绘制大PNG文件后出现嘈杂的图片

Question

我在画布上绘制此（1766 * 2880）PNG文件时遇到问题 但我对那个大小的JPG格式或（1533 * 2500）PNG文件大小没有任何问题 我认为devicePixelRatio用于缩放画布，忽略该比例不会发生任何变化。

var loadImage = function (url) {

    var ratio = Math.max(window.devicePixelRatio || 1, 1),
        image = new Image();

    image.onload = function () {
        var paper = '#paper-0',
            canvas = $(paper)[0],
            ctx = canvas.getContext("2d"),
            img = this;

        var w = Math.ceil(img.width / ratio), h = Math.ceil(img.height / ratio);

        $(paper).css({ width: w + 'px', height: h + 'px' });

        canvas.width = w * ratio;
        canvas.height = h * ratio;

        ctx.scale(ratio, ratio);
        ctx.drawImage(img, 0, 0, w, h);
    }
    image.src = url;
}