I thought I’d share this for anyone who finds their canvas elements a little blurry.
And if anyone has come up with a different solution I’d be interested to hear more.
Blurry HTML canvas is documented quite a bit online with a number of stack overflow questions on the topic. So not unique to anvil but I wasn’t sure what the anvil approach to this might be.
Following this example, I came up with this idea:
highDPIchecks the css width and the canvas width for the canvas element
- if these are different resize the canvas width and height by factor 2
- then scale the canvas by factor 2 (or by more if the device pixel ratio is larger than 2)
working example (zoom in to see the difference if it’s not immediately obvious):