search

larsvers / d3-hexgrid

Regular hexagon tessellation with edge cover detection.
BSD 3-Clause "New" or "Revised" License
153 stars 17 forks source link

Performance issue & solution #31

Open ligoo opened 4 months ago

ligoo commented 4 months ago

Hello,

I found a warning message from the console:

Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
getCover_default @ d3-hexgrid.js?v=5cd79255:1213
(anonymous) @ d3-hexgrid.js?v=5cd79255:1389
hexgrid @ d3-hexgrid.js?v=5cd79255:1388
...

Looking into your code, by modifying /getImageData.js on line 22 from:

const context = canvas.getContext('2d');

to:

const context = canvas.getContext('2d', { willReadFrequently: true });

The same was applied in /getEdgeTools.js. This has led to big performance improvement (>10x) for a world map with a radius of 3.

I'll let you try and see if it's a good solution that should be applied.

larsvers commented 4 months ago

Thanks @ligoo! I'll have a look...