Blurry Image when renders canvas to png

I am going to convert html to canvas and render that canvas to png file. It works well on well display but not work on which window.devicePixelRatio is larger than 2. I use HTML2Canvas to render html as Canvas.

For canvas, I set imageSmoothingEnabled as false. And set "image-rendering" style option to 'crisp-edges'.

        html2canvas($('#finalImageToExport')[0], {
            canvas: canvas,
            scale: window.devicePixelRatio
        })

In this case, the canvas width and height are multiple by window.devicePixelRatio. So when I render this canvas to png, I get png file with originalImageWidth * devicePixelRatio width and originalImageHeight * devicePixelRatio.

I need same width and height with origin so scale it down to natural width and height. But I get blurry Image.

How can I resolve this?