q-floodfill
Optimized, non-recursive flood fill algorithm using a scan line search.
Implemented in TypeScript. Zero dependencies and bundle size around 1.8k (gzipped and minified).
Demo - https://pavelkukov.github.io/q-floodfill/
🙌 Acknowledgments
The work here is heavily inspired from QuickFill algorithm by John R. Shaw. https://www.codeproject.com/Articles/6017/QuickFill-An-Efficient-Flood-Fill-Algorithm
📈 Performance
Needs ~30-40ms to fill 800x660 canvas. For comparison, wasm-flood-fill needs ~50-60ms for the same operation.
🧩 Installing
npm install --save q-floodfill
✔ Usage
// import default from module// get 2d context// get image data// Construct flood fill instance// Modify image datafloodFill.fillfillColor, x, y, 0// put the modified data back in contextcontext.putImageDatafloodFill.imageData, 0, 0
Options
- Get modified pixels count
// Construct flood fill instance// Modify image datafloodFill.fillfillColor, x, y, 0// Read property modifiedPixelsCount
- Collect modified pixels. This option is having a significant impact on performance.
// Set collectModifiedPixels to truefloodFill.collectModifiedPixels = true// Modify image datafloodFill.fillfillColor, x, y, 0// Read property modifiedPixels// The type of modifiedPixels is Set<string>// Each point is stored in the format `${x}|${y}`
Useful exports
🧾 Notes
- NPM - https://www.npmjs.com/package/q-floodfill
- GitHub - https://github.com/pavelkukov/q-floodfill
- Storybook - https://pavelkukov.github.io/q-floodfill/
👋 Author
Pavel Kukov pavelkukov@gmail.com
© LICENSE (MIT)
See LICENSE.txt in the root directory
Similar packages
- wasm-flood-fill - https://www.npmjs.com/package/wasm-flood-fill
- ts-flood-fill - https://www.npmjs.com/package/ts-flood-fill