3 ms·

Is there an easy way to make canvas always fill parent while retaining 1:1 pixel size (no blur). Currently I need to use various hacks. Basically just like nor

by dvh 5y ago

Is there an easy way to make canvas always fill parent while retaining 1:1 pixel size (no blur). Currently I need to use various hacks. Basically just like normal div, it currently cannot be done in canvas because once you set c.width=c.clientWidth it starts interfering, so the only solution is extra div (relative, canvas absolute) and on resize update width and height). Also it should work in flexbox.

MildlySerious 5y ago
I am not entirely sure if this is what you mean, on resize/orientationchange you set canvas.width and canvas.height to its clientWidth/clientHeight and redraw. Is that what you mean by hacks?
rikroots 5y ago
The CSS Painting API[1] shows some promise in this area - it adds a (restricted) canvas to elements which always maintains the same size as the div element it's attached to. [1] https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API https://developer.mozilla.org/en-US/docs/Web/API/CSS_Paintin...
esprehn 5y ago
There's two ways (one which you mentioned): - Use a ResizeObserver and observe a wrapper element, then resize and redraw your canvas when it notifies you. https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver https://developer.mozilla.org/en-US/docs/Web/API/ResizeObser... - Use a Paint Worklet. It hooks directly into the browser painting system, but has some limitations on what you can draw with the canvas today. https://developer.mozilla.org/en-US/docs/Web/API/PaintWorklet https://developer.mozilla.org/en-US/docs/Web/API/PaintWorkle... You could also consider SVG instead of Canvas. There's no way to automatically resize and replay draw commands but scaled up like you're asking though.
etimberg 5y ago
In chart.js we have a very complex solution for dealing with this. We've gone through a number of iterations, but settled on a using ResizeObserver. You also need to listen to `window.resize` to get notified about DPR changes which can happen when a browser window is dragged from one screen to another. https://github.com/chartjs/Chart.js/blob/master/src/platform/platform.dom.js#L187-L225 https://github.com/chartjs/Chart.js/blob/master/src/platform...
- dvh 5y ago
  >we have a very complex solution This is my experience as well, to do it correctly, it needs to get many minute details exactly right. They still developing canvas so my proposal is to forget about these extremely complex solutions and add new property to canvas that would make width/height same as client width/height (perhaps with one event to let canvas know it was resized).
- c_s_guy 5y ago
  May I ask why `window.resize` is used over `matchMedia`[0] to detect DPR changes? Is one approach better than the other? [0] https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes https://developer.mozilla.org/en-US/docs/Web/API/Window/devi...
  - ygra 5y ago
    The resize event is compatible with IE < 10. Depending on compatibility guarantees this can be a reason.

by dvh 5y ago

MildlySerious 5y ago

I am not entirely sure if this is what you mean, on resize/orientationchange you set canvas.width and canvas.height to its clientWidth/clientHeight and redraw. Is that what you mean by hacks?

rikroots 5y ago

The CSS Painting API[1] shows some promise in this area - it adds a (restricted) canvas to elements which always maintains the same size as the div element it's attached to. [1] https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API https://developer.mozilla.org/en-US/docs/Web/API/CSS_Paintin...

esprehn 5y ago

There's two ways (one which you mentioned): - Use a ResizeObserver and observe a wrapper element, then resize and redraw your canvas when it notifies you. https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver https://developer.mozilla.org/en-US/docs/Web/API/ResizeObser... - Use a Paint Worklet. It hooks directly into the browser painting system, but has some limitations on what you can draw with the canvas today. https://developer.mozilla.org/en-US/docs/Web/API/PaintWorklet https://developer.mozilla.org/en-US/docs/Web/API/PaintWorkle... You could also consider SVG instead of Canvas. There's no way to automatically resize and replay draw commands but scaled up like you're asking though.

etimberg 5y ago

In chart.js we have a very complex solution for dealing with this. We've gone through a number of iterations, but settled on a using ResizeObserver. You also need to listen to `window.resize` to get notified about DPR changes which can happen when a browser window is dragged from one screen to another. https://github.com/chartjs/Chart.js/blob/master/src/platform/platform.dom.js#L187-L225 https://github.com/chartjs/Chart.js/blob/master/src/platform...

dvh 5y ago
>we have a very complex solution This is my experience as well, to do it correctly, it needs to get many minute details exactly right. They still developing canvas so my proposal is to forget about these extremely complex solutions and add new property to canvas that would make width/height same as client width/height (perhaps with one event to let canvas know it was resized).
c_s_guy 5y ago
May I ask why `window.resize` is used over `matchMedia`[0] to detect DPR changes? Is one approach better than the other? [0] https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes https://developer.mozilla.org/en-US/docs/Web/API/Window/devi...
- ygra 5y ago
  The resize event is compatible with IE < 10. Depending on compatibility guarantees this can be a reason.