I built a small HTML5 Canvas animation using components from Konva.js. Everything works great, except that the Canvas element is 2x the size I'd expect - I think because I have a HiDPI/Retina display. Specifically the element looks like
<canvas width="2048" height="1000" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1024px; height: 500px;"></canvas>
The style sizes are what I'm expecting, but the top-level width/height property values are double.
I tried the HiDPI polyfill at https://github.com/jondavidjohn/hidpi-canvas-polyfill, but while this makes my Canvas element the expected size, the Konva.js elements don't seem to resize, and the layout of all those shapes gets totally messed up.
So I'm wondering if anyone has gotten good HiDPI behavior with Konva.js - if so, how, and if not, any tips for how I might be able to get this to work? (It's important for my animation to render similarly on as many devices as possible.)
Konva.js automatically handle retina display. Konva makes all canvas dimensions twice bigger to get a sharp result on HDPI devices automatically. So you don't need to worry about it.