I wanted to convert a chart rendered by canvas element to an image file so that the user can download it. But the official HTML docs say that: The created image data will have a resolution of 96dpi for file formats that support encoding resolution metadata. I don’t know much about digital images so I want some clarification. Here is my understanding :

Pixel per inch (PPI) of an image will always be with respect to the screen size on which you are trying to display the image. Lets say i have screen of 10 inches with a PPI of 10 and 100×100 pixel image. This image will also have a PPI of 10 on this screen. But the same image will have a PPI of 5 on a 20 inch screen with lets say a 20 PPI. So PPI of screen is like the maximum possible resolution and PPI of an image is the actual resolution on a SPECIFIC screen. Now the DPI is also something similar. There is the DPI of printer and then the paper size on which we are printing and finally the image which we are trying to print. For simplicity lets assume one pixel maps to one dot on the printer. Now screen PPI’s and Printer DPI’s are generally good so for standard screen and paper sizes its the image size in pixels that will determine its PPI.

Now the canvas element converts the rendered canvas image into a data URL according to its size. So if the canvas is lets say 500 x 500 pixels. Then the downloaded image will be around this size as well. Why does then the documentation say that The created image data will have a resolution of 96dpi for file formats that support encoding resolution metadata. Won’t the resolution depend on the canvas height and width. And what print output size is this 96dpi with respect to?