- on a html webpage, load PNG image in html canvas. Every image will be a "form" (example input image is attached as [url removed, login to view])
- display the canvas to the user
- detect mouse movements over the canvas
- implement FILL function (as like fill in photoshop) and fill the region under mouse cursor, every time it moves (see attachment [url removed, login to view]). Once the mouse cursor leaves the area, revert back to original and fill new area where the mouse is. Note that this is not a simple rectangle fill provided by canvas, you need to detect edges and white color tones (with some fuzz, defined in some variable as percentage) and fill accordingly.
- on complete (after the fill is done), call custom js function with arguments: top,left,width,height (those are the top left corner of the detected region, and width/height of the region, all in pixels). This function will just [url removed, login to view]() the arguments for now.
If you complete this task properly and on time, there will be more work for more money waiting for you.