Filter image smoothly in html5 canvas. - html

Question

I need to have an image filtered and then with the mouse move erase the filter and leave the image on its original format.
For that I am thinking about having two canvas the one upon the other with
a relative transparent filter on the top.
<div style="position: relative;">
<canvas id="picture-layer" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas
<canvas id="filter-layer" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
Then how can I erase the filter-layer filter on the mouse move and reveal the image from below ?

Answer 1

When the page loads, you could call a function that fills the filter canvas with a semi-transparent color. For example...
function fillFilterCanvas() {
var canvas = document.getElementById("filterCanvas");
var context = canvas.getContext("2d");
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgba(0,0,0,0.75)";
context.fill();
}
When the mouse moves over the filter canvas, you could call a function that clears part of the filter canvas near the mouse position. For example...
function clearFilterCanvas(x, y) {
var canvas = document.getElementById("filterCanvas");
var context = canvas.getContext("2d");
var width = 20;
var height = 20;
context.clearRect(x - width / 2, y - height / 2, width, height);
}
From the mouse move event handler, you would call the clearFilterCanvas() function with the mouse's position in the filter canvas. For example...
function filterCanvas_mousemove(e) {
clearFilterCanvas(e.offsetX, e.offsetY);
}