Use "window.devicePixelRatio" instead of "L.Browser.Retina ? 2 : 1"

Reading over #8185, I noticed the code used to set the pixel size of the canvas in L.Canvas: https://github.com/Leaflet/Leaflet/blob/0f987feda97584ef25b5e64fc166ed2f1ff581ae/src/layer/vector/Canvas.js#L108-L114

The problem with this approach is that Retina displays are not always 2 screen/device pixels per 1 CSS pixel - nowadays we can have values of window.devicePixelRatio of 3, 4, 1.5, 0.5 or anything in between. Specially when considering that mainstream browsers change the value of window.devicePixelRatio when zooming the whole interface with <kbd>Ctrl</kbd>+<kbd>+</kbd>/<kbd>Ctrl</kbd>+<kbd>-</kbd>.

I propose deprecating all instances of L.Browser.Retina ? 2 : 1 and similar approaches: using window.devicePixelRatio instead should just work better. Primarily for the L.Canvas renderer, to provide crisper rendering; but also for the mousewheel zoom factor (after some testing).

Doing this would break IE10 compatibility, and I consider that the chances of breaking something else in the way are quite high.

[jonkoops]

Let’s start using the accepted label for v2 proposals we can all agree on, it will make it easier to create an overview of the changes we’d like to land.

[mourner]

I propose deprecating all instances of L.Browser.Retina ? 2 : 1 and similar approaches

Looks like it’s only used in two instances 1) Canvas, 2) 2x tiles if retina. We want to keep the 2nd behavior so it’s down to just the canvas case (and any case we want it for in the future like scroll wheel). Which seems fine to me.