My goal in my canvas application is to create a high-pass filter. The idea is to subtract the regular image pixels from the blurred image pixels with a radius of x. It sounds straightforward, doesn't it?
var d = pixel.data;
var blurdata = blur(amnt, pixel);
var bd = blurdata.data;
for (var i=0; i<d.length; i+=4) {
d[i] = 128+(d[i]-bd[i]);
d[i+1] = 128+(d[i+1]-bd[i+1]);
d[i+2] = 128+(d[i+2]-bd[i+2]);
}
return pixel;
This code requires two parameters: amnt and pixel. Pixel refers to the ctx.getImageData object, while amnt represents the blur radius. Although the blur function works perfectly as intended, the issue lies in the similarity between the d and bd variables. I'm puzzled about why this is happening. Subtracting bd[i] from d[i] results in 0, leading to a completely gray image when the data is reinserted into the canvas. Additionally, the dimensions of blurdata and pixel data are identical.
I would greatly appreciate any assistance.
Here is the link to the Blur function: