SVG to PNG with devicePixelRatio !== 1

[jorma]

Hey all,

 

Now, this question is not directly related to GSAP but is tangentially relevant I think. However, if you disagree just let me know and I'll remove it.

 

What I'm trying to do is render an SVG to a PNG through the canvas and then save it on machine with a retina display (all these bits are relevant).

 

Drawing the SVG to the canvas and then getting the dataURL from the canvas will do this (see pen). However, on retina screens where CSS pixels do not match physical pixels the canvas becomes blurry. Please note that you will only see this effect if on your device the image in the pen shows 'dpr: 2' (or some other value !== 1). When displaying the canvas this blur is easily solved by multiplying the width and height attributes with window.devicePixelRatio and setting the CSS width and height to the width and height that the image should be on screen. This essentially creates the canvas in a higher resolution and shows it at the scaled resolution removing the blur.

 

However, when downloading that PNG the result is an image with scaled up dimensions and a lower resolution. And I need the image to be the original width and height and not the scaled width and height...

 

The attached pen tries to show this. On the left is the source SVG, in the middle column is the canvas without scaling (blurry) and the resulting PNG underneath. On the right is the scaled canvas (not blurry) and the resulting PNG underneath. The problem is that when downloading the resulting PNG (saveAs on the image on the bottom right or by clicking the link underneath) the result is a 600 x 600 px image with half the resolution (see attachment).

 

My question: does anybody know how to get a 300 x 300 image with the correct resolution. Attaching a monitor that doesn't scale and has a devicePixelRatio of 1 works but is not something I can ask of my users.

 

Any help would be much appreciated.

 

See the Pen jJpgZZ by jormaturkenburg-the-typescripter (@jormaturkenburg-the-typescripter) on CodePen

[Carl]

Its fine to have your question here. However, I don't have a solution for you. You might do better in stackoverflow or a forum related to canvas or more general development topics. 

[jorma]

The answer to my question is... I'm an idiot. But seeing as I'm probably not the only idiot on the planet, I'll just answer my question and hopefully it's useful to someone else.

 

The image is just blurry because it's a raster image rendered to a screen with 4 physical pixels for every 1 pixel in the image. That's why you need to scale up the canvas by a factor of 4 (2 x 2) and then scale it down. Only then does the canvas contain a pixel for every physical pixel.

 

But then downloading that canvas will of course result in an image twice as wide and twice as high. That's the intended result!

 

My question originated from my simple disability to believe that the correct image size could look that pixelated.

 

Sorry for being dumb. Have a nice day