Turn.js messing with the image quality on my Canvas

[jonathands]

Hi i'm reproducing a question I just asked on StackOverflow , because I just did some testing and realized this might me an issue with turn.js , if it's not please close and send me a glitter bomb :P

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

enter image description here enter image description here

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

[alQemist]

If you are using PDF which contains an image of the page there is no benefit to using PDF. If your pages contain images inside the pages then there is no good solution to fixing the display in the browser. The image resolution needs to be optimized during the PDF production process.

[jonathands]

no the pdf i'm using is mostly text , unrasterized

[imran-withuspothe]

can you share your css code? i think it is css issue.

[jonathands]

Hi I'm sorry for the long wait, yesterday I came back to the project and figured out what was going on @imran-withuspothe you where right , there was a declaration

canvas { image-rendering: pixelated; }

messing with the text