javascript - Dynamic Image filter using canvas and range input event -

i'm playing around image filters using canvas after reading post this post. basically, moves through pixels , update value something.

what want adjust brightness of image using input range.
i've attached onchange event handler, , call function update canvas every time user moves slider.

obviously slows down page much, because when user moves slider 10 40, calls function 30 times!. tried using flag this:

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

but that's not want, because want see in "real time" (like in photoshop)

can give me hint solve this? may be, should use event, or perhaps different approach process imagedata.

probably not work expect try adding timeout

var myflag = false; var filtertimeout; slider.onchange = function() {     if (!myflag) {         myflag = true;         cleartimeout(filtertimeout);         filtertimeout = settimeout(function() {             // apply filter hear              myflag = false;         }, 1);     } }