Turn.js messing with the image quality on my Canvas

Question

I'm currently loading a PDF File through PDF.JS and turning the generated canvas into a Turn.js flipbooks

my pages are generated like this.

    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);
    });

and the turn is being applied like this

$(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'));*/
            }
        }
    });
});

very basic stuff, but i don't understand why this happens:

I tryed changing the scale, applying imageSmoothingEnabled : false, and changing image-rendering to pixelated to no avail... what am I missing?