canvas - Turn.js 弄乱了我的画布上的图像质量

Question

我目前正在通过 PDF.JS 加载 PDF 文件并将生成的画布变成 Turn.js 翻书

我的页面是这样生成的。

    pdf.getPage(1).then(function(page) {
        var scale = 1;
        var viewport = page.getViewport(scale);

        // Prepare canvas using PDF page dimensions
        var pag1 = document.getElementById('pag1');
        var context1 = pag1.getContext('2d');
        pag1.height = viewport.height;
        pag1.width = viewport.width;
        var renderContext = {
            canvasContext: context1,
            viewport: viewport
        };
        page.render(renderContext);
    });

并且轮流是这样应用的

$(window).ready(function() {
    $('#magazine').turn({
        display: 'single',
        acceleration: true,
        gradients: !$.isTouch,
        elevation:50,
        when: {
            turned: function(e, page) {
                /*console.log('Current view: ', $(this).turn('view'));*/
            }
        }
    });
});

非常基本的东西，但我不明白为什么会这样：

我尝试更改比例，应用 imageSmoothingEnabled：false，并将图像渲染更改为像素化无济于事......我错过了什么？