This is an example of how to fill an area of an image with a linear gradient, displayed in a HTML Canvas, instantly, and have the gradient respond to the movement of the mouse. Try clicking on the image, holding your mouse button down and moving it around to see the gradient fill in action

The code for this is available on Github, or just view the page source. You can also read a description of how it works my blog post about it.