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:
- in the canvas_reset call a javascript function -
highDPI -
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):
https://canvas-high-dpi.anvil.app
and the code:
https://anvil.works/build#clone:UYBQ77FEIH3DQLVZ=2EM4YKPEU3BRPEN7OVTSTHP6