Canvas.todataurl() Does Not Alter Image Quality. How Comes?

According to the docs: The HTMLCanvasElement.toDataURL() method returns a data URI containing a representation of the image in the format specified by the type parameter (defa

Solution 1:

There is indeed a typo in this quote since they should probably have used ppi instead of dpi and IIRC the EXIF tag is called pixel-density, but it's a common one.

The ppi in jpeg format is simply a note for softwares to let them know that your 300px * 300px digital image is intended to be rendered at a size of 1in*1in. So if the renderer is a printer, able to print at 300dpi, that will do one dot per pixel.

This info is written inside the file's metadata, and whatever the original value set in your original image, toDataURL will only set the JFIF Density Unit metadata to 0 (no units), and X and Y density to 1 (MDN talks about 96dpi because it corresponds to the most standards screen's display ratio, also used in CSS px magic unit).