derrida
asked on
a method works but freezes the browser
hi
i have a method that manipulate a canvas image to add noise. it does work but it freezes the browser for at least a minute and a half.
the amount is set while dragging a slider. again work but obviously doesn't give a good user experience. maybe there is a way to make it perform better, to optimize it?
here is the method:
i have a method that manipulate a canvas image to add noise. it does work but it freezes the browser for at least a minute and a half.
the amount is set while dragging a slider. again work but obviously doesn't give a good user experience. maybe there is a way to make it perform better, to optimize it?
here is the method:
setNoise(opacity){
opacity = opacity || .2;
for (var x = 0; x < this.thecanvas.width; x++ ) {
for (var y = 0; y < this.thecanvas.height; y++ ) {
let number = Math.floor( Math.random() * 60 );
this.thecontext.fillStyle = "rgba(" + number + "," + number + "," + number + "," + opacity + ")";
this.thecontext.fillRect(x, y, 1, 1);
}
}
let dData = this.getData();
this.setData(dData)
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
i actually did used the getImageData and putImageData at the end with the get and set, BUT i didn't wrapped it AND your calculation is way better than mine was. now it runs very smooth!!! thanks for the help
See the example code below:
Open in new window