Incorrect scaling and ghost fragments occur when the page is zoomed out on Chrome and Firefox

Steps to repeat:

1) Using a recent version of Chrome or Firefox, open 
https://rawgit.com/danvk/dygraphs/master/gallery/index.html#g/highlighted-series

2) Scale the page down to ~75% using ctrl+-. Reload the page. Select an area of 
one of the charts to zoom in.

Expected result:
  Graphs are scaled correctly along with the rest of the page.

Actual result:
  Axes are spaced unevenly and when the graph is zoomed, parts of the canvas are left "ghosted" against the background. The plots look broken.

This appears to be coming from the getContentPixelRatio method: 
https://github.com/danvk/dygraphs/blob/master/dygraph-utils.js#L788

The code uses window.devicePixelRatio as the numerator and 
context.fooBackingStorePixelRatio as the denominator to determine the return 
value.

When Chrome or Firefox is zoomed out on a regular, non-hidpi device, the 
window.devicePixelRatio will be less than one (e.g. 0.75 at 75% zoom) and the 
context.fooBackingStorePixelRatio will be undefined. The code then defaults the 
fooBackingStorePixelRatio to 1, causing the return value to be (incorrectly) 
less than one.

Returning a value of 1 from this method when context.fooBackingStorePixelRatio 
is undefined fixes the bug, at least for this scenario.

Happy to provide a PR if that would be helpful.

Original issue reported on code.google.com by gjor...@google.com on 21 Aug 2014 at 5:50

pingjiang / dygraphs

Incorrect scaling and ghost fragments occur when the page is zoomed out on Chrome and Firefox #524