Anvil Community Forum

Canvas resolution blurry

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
  • highDPI checks 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

2 Likes