4 ms·

you can use matchMedia to detect devicePixelRatio changes and re-sync: https://github.com/leeoniya/uPlot/blob/190134aa844cfa2a0c052e72501240efc6031ced/src/dom.

you can use matchMedia to detect devicePixelRatio changes and re-sync: https://github.com/leeoniya/uPlot/blob/190134aa844cfa2a0c052e72501240efc6031ced/src/dom.js#L20-L33 https://github.com/leeoniya/uPlot/blob/190134aa844cfa2a0c052... everything stays crisp even as you browser-zoom. e.g. https://leeoniya.github.io/uPlot/demos/area-fill.html https://leeoniya.github.io/uPlot/demos/area-fill.html

moron4hire 5y ago
Zooming also fires the Window's `resize` event, which will also catch a user rotating their smartphone/tablet, or, erh, resizing the window on desktop.
- leeoniya 5y ago
  resize and orientationchange don't change devicePixelRatio though, so they're somewhat different concerns.
  - moron4hire 5y ago
    No, it's the same concern. The concern is not "how do I keep track of just devicePixelRatio?" It's "how do I fill this window with a canvas at native resolution?" Resize handles all of that. Device changes orientation? Resize fires. User zooms on content (this changing devicePixelRatio)? Resize fires. Anything that changes the page's clientWidth/clientHeight causes the Resize event to fire. You need only the one event.
    - deleted 5y ago
      [deleted]
    - deleted 5y ago
      [deleted]
    - Dylan16807 5y ago
      > The concern is not "how do I keep track of just devicePixelRatio?" It's "how do I fill this window with a canvas at native resolution?" Not everyone's canvas is filling the window.
      - moron4hire 5y ago
        All the ways in which you will care about how to buffer dimensions of your canvas to avoid aliasing artifacts can be handled with just the window.onresize event, whether your canvas is fixed or proportionally sized. https://codepen.io/SeanMcBeth/pen/QWOoLNX https://codepen.io/SeanMcBeth/pen/QWOoLNX Throw a check in there to make sure the native dimensions actually did change so you don't needlessly redraw. Debounce it with setTimeout if you're super worried about people waggling their windows around or whatever.

moron4hire 5y ago

Zooming also fires the Window's `resize` event, which will also catch a user rotating their smartphone/tablet, or, erh, resizing the window on desktop.

leeoniya 5y ago
resize and orientationchange don't change devicePixelRatio though, so they're somewhat different concerns.
- moron4hire 5y ago
  No, it's the same concern. The concern is not "how do I keep track of just devicePixelRatio?" It's "how do I fill this window with a canvas at native resolution?" Resize handles all of that. Device changes orientation? Resize fires. User zooms on content (this changing devicePixelRatio)? Resize fires. Anything that changes the page's clientWidth/clientHeight causes the Resize event to fire. You need only the one event.
  - deleted 5y ago
    [deleted]
  - deleted 5y ago
    [deleted]
  - Dylan16807 5y ago
    > The concern is not "how do I keep track of just devicePixelRatio?" It's "how do I fill this window with a canvas at native resolution?" Not everyone's canvas is filling the window.
    - moron4hire 5y ago
      All the ways in which you will care about how to buffer dimensions of your canvas to avoid aliasing artifacts can be handled with just the window.onresize event, whether your canvas is fixed or proportionally sized. https://codepen.io/SeanMcBeth/pen/QWOoLNX https://codepen.io/SeanMcBeth/pen/QWOoLNX Throw a check in there to make sure the native dimensions actually did change so you don't needlessly redraw. Debounce it with setTimeout if you're super worried about people waggling their windows around or whatever.