Hacker News Reader

Comment by dvh | Hacker News Reader

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.

View on HN

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/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/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.

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

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

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/devi...

The resize event is compatible with IE < 10. Depending on compatibility guarantees this can be a reason.

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.

[1] https://developer.mozilla.org/en-US/docs/Web/API/CSS_Paintin...

Reply on news.ycombinator.com