Javascript canvas image edge detection + color fill

Your task is simple: write javascript functions for the following task: - on a html webpage, load PNG image in html canvas. Every image will be a "form" (example input image is attached as [login to view URL]) - 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 [login to view URL]). 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 [login to view URL]() the arguments for now. If you complete this task properly and on time, there will be more work for more money waiting for you. Thank you