with the code blow i am able to blur an image but i have not figured how to blur only a certain color
on the inverse colors comment i was able to only inverse a certain color i basically want to do the same but with bluring instead of inversing the color
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 0, 0);
var imgData = ctx.getImageData(0, 0, c.width, c.height);
// invert colors
// var i;
// for (i = 0; i < imgData.data.length; i += 4) {
// if (imgData.data[i] == 243
// && imgData.data[i+1] == 83
// && imgData.data[i+2] == 37
// && imgData.data[i+3] == 255){
// imgData.data[i] = 255 - imgData.data[i];
// imgData.data[i+1] = 255 - imgData.data[i+1];
// imgData.data[i+2] = 255 - imgData.data[i+2];
// imgData.data[i+3] = 255;
// }
// }
var px = imgData.data;
var tmPx = new Uint8ClampedArray(px.length);
for (var i=0, len = px.length;i<len;i++){
tmPx[i] = px[i];
if (i%4==3){ continue;}
px[i] = (tmPx[i]
+ (tmPx[i - 4] || tmPx[i])
+ (tmPx[i + 4] || tmPx[i])
+ (tmPx[i - 4 * imgData.width] || tmPx[i])
+ (tmPx[i + 4 * imgData.width] || tmPx[i])
+ (tmPx[i - 4 * imgData.width -4] || tmPx[i])
+ (tmPx[i + 4 * imgData.width +4] || tmPx[i])
+ (tmPx[i - 4 * imgData.width +4] || tmPx[i])
+ (tmPx[i + 4 * imgData.width -4] || tmPx[i])
) / 9;
}
delete tmPx;
ctx.putImageData(imgData, 0, 0);
img.remove()