0

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.)

davewy
  • 1,781
  • 1
  • 16
  • 27

1 Answers1

1

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.

lavrton
  • 18,973
  • 4
  • 30
  • 63
  • But my canvas is taking up almost my whole screen -- 2048x1000 -- on my HiDPI screen. It should be only taking up 1024x500 on my screen. It should have those 2x dimensions to keep things sharp, I understand, but it should take up about half my screen, not all of my screen. Is there some scaling I can do? – davewy Nov 24 '17 at 01:22
  • @davewy Are you sure it takes 2048x1000 size? As I can see the canvas has correct styles: `width: 1024px; height: 500px;` – lavrton Nov 24 '17 at 01:28
  • It turned out the machine I was testing on had a global scaling factor applied in the OS settings, which caused all content to render at 2x size. So Konva is behaving perfectly / as it should. Many thanks for the excellent library! :) – davewy Dec 03 '17 at 02:01