Question

I’m playing around with some image filters using Canvas after reading this post this post. Basically, it moves through all the pixels and update the value to something.

What I want to do now it to adjust the brightness of the image using a input range.
So I’ve attached a onChange event handler, and call the function to update the canvas every time the user moves the slider.

Obviously this slows down the page so much, because when the user moves the slider from 10 to 40, it calls the function 30 times!.
I tried using a flag like this:

if (!myFlag) {
 myFlag = true;
 ...call the function...
 myFlag = false;
}

But that’s not exactly what I want, because I want to see it in “real time” (like in photoshop)

Can anyone give me a hint to solve this? May be, I should use another event, or perhaps a completely different approach to process the imageData.

Answer 1

probably will not work as good as you expect but try adding a timeout

var myFlag = false;
var filterTimeout;
slider.onChange = function() {
    if (!myFlag) {
        myFlag = true;
        clearTimeout(filterTimeout);
        filterTimeout = setTimeout(function() {
            // apply the filter hear

            myFlag = false;
        }, 1);
    }
}