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.
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.
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).
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?
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.
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.