Use window.devicePixelRatio

[maciejhirsz]

• MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
• stdweb: https://docs.rs/stdweb/0.4.17/stdweb/web/struct.Window.html#method.device_pixel_ratio
• Elaboration: https://www.khronos.org/webgl/wiki/HandlingHighDPI

Basically on hidpi/retina screens, the canvas width and height properties need to be multiplied by window.devicePixelRatio (rounded or floored), with CSS pixel values entered as CSS width/height values, otherwise the image will be blurred (linear upscaling, most commonly by a factor of 2 on hidpi / retina screens). Hidpi desktop screens are not super common yet outside of Apple products (although I don't know how anyone can live without them :P), most phones are typically retina/hidpi though, at least as far as web is concerned.