{"_id":"@roboflow/floodfill","_rev":"29-fbe9639162b165e71306e39f506752cd","name":"@roboflow/floodfill","dist-tags":{"latest":"2.1.4"},"versions":{"2.1.1":{"name":"@roboflow/floodfill","version":"2.1.1","keywords":["floodfill","canvas"],"author":{"name":"Max Irwin"},"license":"MIT","_id":"@roboflow/floodfill@2.1.1","maintainers":[{"name":"roboflowbrad","email":"npm@roboflow.ai"}],"homepage":"https://github.com/binarymax/floodfill.js#readme","bugs":{"url":"https://github.com/binarymax/floodfill.js/issues"},"dist":{"shasum":"edd985639c4147de1db1bc018ae290ee6759a31f","tarball":"https://registry.npmjs.org/@roboflow/floodfill/-/floodfill-2.1.1.tgz","fileCount":11,"integrity":"sha512-gsSpWhM765czPR6viaeeJxTzmA1nkYFuw9XuQ3dql7QsC+G6cJ/knslRQTIabRBvska2O2e8bW6GZQSR0y+8TA==","signatures":[{"sig":"MEQCIH+CzMJ3EN4LJbt1ST8xNTrKMA83VMhfgKlUBY7s1XADAiBGoVy/ee3w8kdTwEUOksAFz/v5daP5JpEi9ERtAuqnDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel1jSCRA9TVsSAnZWagAA16IQAIm8CeIF1XRWDNHgC428\nOekM90gKl5pQJQJMAU52kTexr0g1UTF0cEy86MvdgbwShZRIWTI9jceYPkiK\nJxFT+zs93sDSn76C6120rcsxGJFxE5kTdAjBmIcC4bn5F7DfrQg1U82aZshn\ne98UgNK5OCtbiOlDg8YRXU7HwyGBOWZCmzT70ndM4jFCr1ijF78x9aQFGw9O\nijxER8iVs/qChz/P+5trJgVm192cXTq05G1nGhMvnLRYakZzN67UvGXhTFzd\nWQQ5eUVvpRL3Mmthx5FnQdUlVgkj1rFX7FomrcVblBsbHGvDzr66rkceXGsy\npgtIK2ysROkWCIN4ZfenuLw0wAJt54i3eLngsoFxdlG72SQP2edsZNInWuA/\nmeRYmPSnZyy2I3EzR/NOxPeGa2Qm/NxVVMzlH7WEZmsb1tgoDqQhDwE1GmI/\nZEsaSwFiOBcyb06ewBtA4jbRS3O0wtjN4zFIZeIfD+//9H+P9A7MdAJJSKNJ\n/MUMEiw+WYjgXPKoOx7SuaFTkfaRfPxtZIGajAQBeMWYfxYkQXUdsdI/TDhS\njoIezY76Yq6eL1QWbjZN8G3E5b68BFUooSlT6mcxYdZ3SD1pdyrXPy+BME0V\neupbY4kt9laP3YKmelFwjmI/0QzwnZxOseWidcLliLYF+kV10GlTReWtp+Wt\n/IGp\r\n=v6OT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"floodfill.js","gitHead":"20902b4385a5a62360895b15f5a40aa23a2955b0","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"roboflowbrad","email":"npm@roboflow.ai"},"repository":{"url":"git+https://github.com/binarymax/floodfill.js.git","type":"git"},"_npmVersion":"6.14.1","description":"Zero dependency canvas floodfill","directories":{"example":"examples"},"_nodeVersion":"13.2.0","dependencies":{"parse-color":"^1.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floodfill_2.1.1_1586976977825_0.002720591215686685","host":"s3://npm-registry-packages"}},"2.1.2":{"name":"@roboflow/floodfill","version":"2.1.2","keywords":["floodfill","canvas"],"author":{"name":"Max Irwin"},"license":"MIT","_id":"@roboflow/floodfill@2.1.2","maintainers":[{"name":"roboflowbrad","email":"npm@roboflow.ai"}],"homepage":"https://github.com/binarymax/floodfill.js#readme","bugs":{"url":"https://github.com/binarymax/floodfill.js/issues"},"dist":{"shasum":"1e7f918bdd38f035f4020959fd8978ed87bf6dac","tarball":"https://registry.npmjs.org/@roboflow/floodfill/-/floodfill-2.1.2.tgz","fileCount":11,"integrity":"sha512-VaZgxgD2Fymn34hDhXQKy7Dp2sXv+YlYid5bGdcgOvDQOaelKjpk0VRwt3Y2lD+5rWBrUikm4O/LMO+ns5CuWg==","signatures":[{"sig":"MEQCIEIyAs44KwYtxJACjgFbt4xtpLSvdVWE8PI34sDVvWQWAiBfd9Bgh293Ow1yCnSjfa2wYUTeDDyGi6U6Jgoa9/3K1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95893,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel11qCRA9TVsSAnZWagAAyk0P/2wpJD8vuA/vCFBiJDg5\nhjMWEcJfXJKJdhyjmS45NYlu3xeCVxZiAl0YLmQQpOD8w0iBlaBkTy7kD5VC\nw8TXzxO0JoBrpEPJx41u732Bj7690SiJuSR5iTW9J5lUPbClTRJgJLnv9PaR\nXZmH9cET/AJFzqsMZ1vYhcD0quCWE866qaLYT7VDnVa0N0W4IhqHn8Buq/Fi\nCWrZSuZUjrAth0KeTFarogmz0fGD8JkFt0S5XdR+b+FwfYhd1U1+bsqTYXov\nTyjEvlWu2MNWjQwwM6ijIfhHU8aEm1n59e3Myfr3G4ZBtnMO0FbK3J5rrUdP\nv62+WQb4z9dtiiceVjMyAwmxQgFrzwZZ0GhUMfkNO10utpTY50gEMtm2tQHU\nlqoS2SuqcAYaIjC7C7sAb9V8aH5tS9yNu+Y7x04VSPREA1Dzt3S32ItjFGNS\nRnd9oDT2FE2NUW85YYY3O6BrwYwe1PWVZcD2EjhWRrvzWN9AjbiTVoC81iEQ\nrNpfbjhGCb/JcH48iypc1gjKaS1Wgg/9mXHlOPapOAZm4LBpjo/V+c82+YMy\nWfcKxwFI/+Q56AuhwM6lv2+yM5lvp4YtQnVR8KOHwdJW4p6lbDToS0o+qcG5\ngaO9ocDCov824YFNmG3d+hV5V7/nmaT6bUxP/GhzOt81vjycepYKdj4LAZLo\n4bwH\r\n=C7OW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"floodfill.js","gitHead":"20902b4385a5a62360895b15f5a40aa23a2955b0","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"roboflowbrad","email":"npm@roboflow.ai"},"repository":{"url":"git+https://github.com/binarymax/floodfill.js.git","type":"git"},"_npmVersion":"6.14.1","description":"Zero dependency canvas floodfill","directories":{"example":"examples"},"_nodeVersion":"13.2.0","dependencies":{"parse-color":"^1.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floodfill_2.1.2_1586978153962_0.8665718074939659","host":"s3://npm-registry-packages"}},"2.1.3":{"name":"@roboflow/floodfill","version":"2.1.3","keywords":["floodfill","canvas"],"author":{"name":"Max Irwin"},"license":"MIT","_id":"@roboflow/floodfill@2.1.3","maintainers":[{"name":"roboflowbrad","email":"npm@roboflow.ai"}],"homepage":"https://github.com/binarymax/floodfill.js#readme","bugs":{"url":"https://github.com/binarymax/floodfill.js/issues"},"dist":{"shasum":"d110165c4834c7b14ebcc4866b96572850030e34","tarball":"https://registry.npmjs.org/@roboflow/floodfill/-/floodfill-2.1.3.tgz","fileCount":11,"integrity":"sha512-qME3cIixTB/rKsZlMXpquMqz5NydQZTJdafmx/QQ627Y4GujCapJveXb4sT6CuCfLCfylqqtWcGHgPVW2pJz7g==","signatures":[{"sig":"MEQCIEQEVKIngajyca9QW0ez3rM4VR5U16WdFeQC1SVVMSYiAiB6+0UqIni6Odr0xTtX8zyLKzjXItoc3sukWXBsWTh5+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel14cCRA9TVsSAnZWagAA/dMP/2HlCYAuMTyS3kmYxyfW\nn3TdZk1KXKDh6Tfj5DxOQM1xlyvu7EO/9qiDkxdaseBy+B1xAunlacN0JT3/\n0ijt8mDMZLkScDI6lw8XA/AUdp7lgWcNzaus6SyUCdio+SZOLaTi1qRsvyG/\n0pI7tR1YXvpxrCkt9xmwgFYlmWCUtnEkoUPYrWHScK0xmF0bc1Zt+B6dZZjt\n7fkxXYxX64m1PArCECh1bSpoGnRv/IO/hFozadyxr04TvzutIdGNvRp+cevs\nbE9olSAs35Hfhl5sgPrPUTJrRqJq8muH1Ka7XfwLnVBFFHPgWyLKHay2iSp+\nFlI7ibnp58nzJ/LRaI2pfYNEOd/aGEuXPdkd8YtEJPuicn+Umhfity87/xNT\n7IO6Wggr6mYIn1SzhTkYXk1GfJOPYCvEfTC3ZbadKFXy14FgoapdiuDZ2cmu\npDjgPa+0foQqFBcj03fIvrNsyVUrbMMCsPGl+6k/2PVNt0NYbrHAbRfrBHVx\nJHipYxcIojoI0y4gjoV85iGkFmuFJOL2hYI3bcvPnzXAObPPCE27jAvxiN5u\nPoSNWnriR4mtgiCNks/h5Cto5W8bcKkGteMa17JOsQl05x9BfdEAqgzl2mHl\nQ20JNkWIS+gAfjJrIZn2k/kBYpteedI6rIVde9NlPwytEKgTBo87GHiaEi8Z\n13tz\r\n=pIbb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"floodfill.js","gitHead":"20902b4385a5a62360895b15f5a40aa23a2955b0","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"roboflowbrad","email":"npm@roboflow.ai"},"repository":{"url":"git+https://github.com/binarymax/floodfill.js.git","type":"git"},"_npmVersion":"6.14.1","description":"Zero dependency canvas floodfill","directories":{"example":"examples"},"_nodeVersion":"13.2.0","dependencies":{"parse-color":"^1.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floodfill_2.1.3_1586978331465_0.6089632982928637","host":"s3://npm-registry-packages"}},"2.1.4":{"name":"@roboflow/floodfill","version":"2.1.4","keywords":["floodfill","canvas"],"author":{"name":"Max Irwin"},"license":"MIT","_id":"@roboflow/floodfill@2.1.4","maintainers":[{"name":"roboflowbrad","email":"npm@roboflow.ai"}],"homepage":"https://github.com/binarymax/floodfill.js#readme","bugs":{"url":"https://github.com/binarymax/floodfill.js/issues"},"dist":{"shasum":"19761b46800f9b9057f93cc9f4e349d626e4b105","tarball":"https://registry.npmjs.org/@roboflow/floodfill/-/floodfill-2.1.4.tgz","fileCount":11,"integrity":"sha512-JORsttCK8rUOwIbk+O6KOAmHAc5MNCD5F2KbKDuFVkpQxpjsl3/IxQ44k8Lbwt1EQri/UqpBH9uvk0gsb/9yPg==","signatures":[{"sig":"MEYCIQCD1uEYwoJpt3c3mc5dOHWxvioK6vgwAD5EJ4s6OWnONQIhALpDUjsvTMpMehRZP8EuXBPuV38pmtimeEk4CyuPgv0P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel162CRA9TVsSAnZWagAAHW4P/0FnVX3YShnjYP0sbPTQ\nA++w68R4RhVu35SgQkVCQoD2JRwdVULd8cjg6KSAtUdw2QcC4F3qsQLl58HB\nXElZgR3vJG/LMTNCice8ayEaD72WNNLyda92gINRtq3x5q97Ji/f/yJB6i2o\nqe2rXvRNkHrbSzw9faQecla17iKrZMeT2Vr14VQlZKEYmu6DFOgjvKpYjRmd\nHEmRQs6WxsBAg2PN6KJotJqpMaHGZx4Hx2Fl0vaHwtLPIouC0/a09YyA8fBM\ns4lhQbx/4aTyp5XkaDrTiQaZHwatbKWRwrJ3lq2SRKgbYBMfaSu5OHtnZhmI\n4AyHinxw/g8kAmYfM+HcOhC07tATQ2cgilJ3DEoSgR8y7jlhqdYT4UugiSgi\namDv6Naw/XWN+wLI61Y8LNR0ZwPiZuRMsYZWzvko8NU7Ui7fWVZJwqTz+H79\n4/nnAPCYMNt/cECLKbOW++4S1s4HUjaDgDtnrLt9/Y5DLGsM94qjSrLX8z6e\n4f2zr/hgUGZIVL5h+hRESw6E/eDFRe+OLzuvPSHRPoiR9+5qdM75cTXP7dE/\nUCW+8QTRjcqFzxf4eXW6vF+CpWTnxix58Z3/6AZdEbZhiBOa9RhxsrHg0OZf\n4eXaJU8V3TqLQVrB8+64x9IOPfsd8nhmbSh4KHiqvZ3lDJzz4f1BlUePHY8C\nyHW2\r\n=NQi9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"floodfill.js","gitHead":"20902b4385a5a62360895b15f5a40aa23a2955b0","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"roboflowbrad","email":"npm@roboflow.ai"},"repository":{"url":"git+https://github.com/binarymax/floodfill.js.git","type":"git"},"_npmVersion":"6.14.1","description":"Zero dependency canvas floodfill","directories":{"example":"examples"},"_nodeVersion":"13.2.0","dependencies":{"parse-color":"^1.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/floodfill_2.1.4_1586978485618_0.4412268747292012","host":"s3://npm-registry-packages"}}},"time":{"created":"2020-04-15T18:56:17.588Z","modified":"2026-08-28T14:18:38.678Z","2.1.1":"2020-04-15T18:56:18.127Z","2.1.2":"2020-04-15T19:15:54.158Z","2.1.3":"2020-04-15T19:18:51.592Z","2.1.4":"2020-04-15T19:21:25.775Z"},"bugs":{"url":"https://github.com/binarymax/floodfill.js/issues"},"author":{"name":"Max Irwin"},"license":"MIT","homepage":"https://github.com/binarymax/floodfill.js#readme","keywords":["floodfill","canvas"],"repository":{"url":"git+https://github.com/binarymax/floodfill.js.git","type":"git"},"description":"Zero dependency canvas floodfill","maintainers":[{"email":"tony@roboflow.com","name":"roboflow_tony"},{"email":"brad@roboflow.com","name":"roboflowbrad"},{"email":"thomas@roboflow.com","name":"roboflow-thomas"},{"email":"product-team@roboflow.com","name":"rf_github_deployer"},{"email":"sachin@bigbitbus.com","name":"bigbitbus"},{"email":"lueno0729@gmail.com","name":"stellasphere"},{"email":"maxwell@roboflow.com","name":"roboflow_maxwell"},{"email":"lake@roboflow.com","name":"robolake"},{"email":"balthasar.huber@outlook.com","name":"balthazur"},{"email":"shawn@roboflow.com","name":"techadamz-robo"},{"email":"rodrigo@roboflow.com","name":"digao.roboflow"},{"email":"joao@roboflow.com","name":"roboflow_joao"}],"readme":"# Floodfill\n\nHTML5 Canvas Floodfill via JavaScript\n\n## Robobflow modifications:\n\nUpdated to support node-canvas. Added `blurEdges` to help with background erasing\nand `randomHSL` to add basic image augmentation support.\n\nUsage example via https://blog.roboflow.ai/how-to-create-a-synthetic-dataset\n\n## How to use it:\n\nInclude it old-school\n\n```<script type=\"text/javascript\" src=\"floodfill.js\"></script>```\n\nOr use the minified version\n\n```<script type=\"text/javascript\" src=\"floodfill.min.js\"></script>```\n\nThis adds the ```floodfill``` method to the global window context, and the method ```CanvasRenderingContext2d.prototype.fillFlood``` for idiomatic context invocation.\n\n## context.fillFlood\n\nLike other context fill methods (such as context.fillRect), set the context.fillStyle beforehand to a color.  Patterns and gradients are currently unsupported, but any color supported by CSS can be used.  For example:\n\n - ```context.fillStyle = 'blue';```\n - ```context.fillStyle = '#0000FF';```\n - ```context.fillStyle = 'rgb(0,0,255)';```\n - ```context.fillStyle = 'rgba(0,0,255,1.0)';```\n\nWhen the fillStyle is set, call the method with the following arguments: (x , y [,tolerance=0] [,left=0] [,top=0] [,right=context.width] [,bottom=context.height]).\n\nThe method signature is:\n\n```CanvasRenderingContext2.prototype.fillFlood = function(uint x, uint y, byte tolerance, uint left, uint top, uint right, uint bottom)```\n\nHere is an example of filling a canvas using the method above, using red as the color and starting the fill algorithm at (x=50,y=75) with a tolerance of 32:\n\n```javascript\nvar canvas = document.getElementById('canvas_circle');\nvar context = canvas.getContext('2d');\ncontext.fillStyle = \"rgba(255,0,0,1.0)\";\ncontext.fillFlood(50, 75, 32);\n```\n\nThe method arguments are documented below:\n\n#### uint x, uint y (required)\nThe x,y coordinates are the origin point in which to begin the fill operation.  On an arbitrary canvas the coordinates 10,50 will be the 10th pixel from the left and the 50th pixel from the top.  They must fit within the following boundaries: ```0 <= x < width``` and ```0 <= y < height```\n\n#### byte tolerance (optional, default=0)\nThe tolerance, which allows for the algorithm to fill similar pixels.  The default is 0, which fills pixels exactly matching that of the starting x,y coordinate.  The maximum of 254 bleeds the fill over all other pixels.  Tip: A typical fill tolerance for anti-alias is 128.\n\n#### uint left (optional, default=0)\nIt is possible to set a bounding box smaller than the full context area.  The ```left``` argument will prevent the fill from occuring at any pixel coordinate with x less than this left value.\n\n#### uint top (optional, default=0)\nIt is possible to set a bounding box smaller than the full context area.  The ```top``` argument will prevent the fill from occuring at any pixel coordinate with y less than this top value.\n\n#### uint right (optional, default=context.width)\nIt is possible to set a bounding box smaller than the full context area.  The ```right``` argument will prevent the fill from occuring at any pixel coordinate with x greater than this right value.\n\n#### uint bottom (optional, default=context.height)\nIt is possible to set a bounding box smaller than the full context area.  The ```bottom``` argument will prevent the fill from occuring at any pixel coordinate with y greater than this bottom value.\n\n\n## floodfill\n\nThe global floodfill method is available to be called by passing in any Uint8ClampedArray of bytes to be filled.  This allows for asyncronous operations on the data itself (for example in a webworker), without requiring the browser context object.\n\nWhen calling the method above with a coordinate, color, context, boundaries, and tolerance, the context area starting at the coordinate will be filled with the color in an area of colors similar to that of the coordinate.  The similarity is determined by the tolerance parameter.\n\nCall the method with the following arguments: (data, x , y, color, ,tolerance ,width, height).\n\nNote that this method has no defaults, and all values must be supplied.  Additionally, width and height must match the dimensions of the data object, in the ratio data.length===width*height*4.\n\nThe method signature is:\n\n```function floodfill(Uint8ClampedArray data, uint x, uint y, rgba color, byte tolerance, uint width, uint height)```\n\nAll the arguments are described below in detail:\n\n#### Uint8ClampedArray data (required)\nThe data object is an Uint8ClampedArray view of a Typed Array.  The array is one-dimensional, but is treated as a two-dimensional array of blocks of 4 bytes (each byte representing an RGBA color object).  The two dimensions are demarcated by using the width and height arguments as described below.\n\n#### uint x, uint y (required)\nThe x,y coordinates are the origin point in which to begin the fill operation.  On an arbitrary canvas the coordinates 10,50 will be the 10th pixel from the left and the 50th pixel from the top.  They must fit within the following boundaries: ```0 <= x < width``` and ```0 <= y < height```\n\n#### rgba color (required)\nThe rgba color argument, represented as ```{r:BYTE,g:BYTE,b:BYTE,a:BYTE}``` where BYTE is a number from 0 to 255, is the color that will be used to fill the data object.\n\n#### byte tolerance (required)\nThe tolerance, which allows for the algorithm to fill similar pixels.  The default is 0, which fills pixels exactly matching that of the starting x,y coordinate.  The maximum of 254 bleeds the fill over all other pixels.  Tip: A typical fill tolerance for anti-alias is 128.\n\n#### uint width, uint height\nThe width and height of the two-dimensional construct that is bound to the data object.  As the data object is a two dimensional array of 4 byte blocks representing RGBA pixels, the width and height must match the dimensions of the data object.  The values are validated during method call to ensure the ratio ```data.length===width*height*4```.  A mismatch will result in an error being thrown.\n\n## Examples\n\nSee the code in examples/tests.html\n","readmeFilename":"README.md"}