Ich habe eine kleine HTML5-Canvas-Animation mit Komponenten von Konva.js erstellt. Alles funktioniert super, nur dass das Canvas-Element 2x größer ist, als ich es erwartet hätte - ich denke, weil ich ein HiDPI/Retina-Display habe. Insbesondere sieht das Element wieProper HiDPI-Rendering von Canvas-Elementen (mit Konva.js)?
<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>
Die Stil Größen sind das, was ich erwarte, aber die Top-Level-Breite/Höhe Eigenschaftswerte sind doppelt.
Ich habe versucht, die HiDPI Polyfill bei https://github.com/jondavidjohn/hidpi-canvas-polyfill, aber während dies mein Canvas-Element die erwartete Größe, die Konva.js Elemente scheinen nicht die Größe zu ändern, und das Layout all dieser Formen wird völlig durcheinander gebracht.
Ich frage mich also, ob jemand mit Konva.js gutes HiDPI-Verhalten bekommen hat - wenn ja, wie, und wenn nicht, irgendwelche Tipps, wie ich das vielleicht zum Laufen bringen könnte? (Es ist wichtig, dass meine Animation auf so vielen Geräten wie möglich gerendert wird.)
Ich habe dies nur auf Chrome unter Windows getestet - andere Browser verhalten sich vielleicht anders ... – davewy