javascript - Canvas Colour Match Range -

my current code scans canvas colour removes canvas , moves onto next pixel. achieve intensity of colours search. find similar colours aswell, not 1 rgba color.

is possible, here working code 1 colour.

current code

    //1-225     threshold = 100;      //get canvas element data     imagedata = context.getimagedata(0, 0, canvasel.width, canvasel.height);     data = imagedata.data;      //rgb     color = [120, 82, 31, 1];      (var = 0, n = data.length; <n; += 4) {       if(data[i] === color[0] && data[i+1] === color[1] && data[i+2] === color[2]){            data[i+3] = 1;       }     }      context.putimagedata(imagedata, 0, 0); 

disclaimer

this answer based on op's code , may not best way of doing it.

---

to check if actual pixel in range defined threshold, can use if statement like-so :
if(data[i]>=color[0]-threshold/2 && data[i]<=color[0]+threshold/2 && data[i+1]>=color[1]-threshold/2 && data[i+1]<=color[1]+threshold/2 && data[i+2]>=color[2]-threshold/2 && data[i+2]<=color[2]+threshold/2

or, more clarity, make function check fork :

function isbetween(value, i){     return (value>=color[i]-threshold/2 && value<=color[i]+threshold/2) } 

then use :

if( isbetween(data[i],i%4) && isbetween(data[i+1],i%4+1) && isbetween(data[i+2],i%4+2) ){ dosomething() }

for complete example :

var canvasel = document.createelement('canvas');  var context = canvasel.getcontext('2d');  document.body.appendchild(canvasel);  var imagedata;    var img = new image();  img.crossorigin='anonymous';  img.onload = function(){    canvasel.height = 250;    canvasel.width = 400;    context.drawimage(this, 0,0,canvasel.width,canvasel.height);    imagedata = context.getimagedata(0, 0, canvasel.width, canvasel.height);    }  // image levanne (https://www.flickr.com/photos/lfphotos/14282259549/) cc by-sa 2.0  img.src = 'https://dl.dropboxusercontent.com/s/te5g7s1lh122quy/1024px-levanne_%2814282259549%29.jpg?dl=0';    var input = document.queryselector('input');  input.addeventlistener('change', colorintesitythreshold, false);      function colorintesitythreshold(){      var threshold = this.value;      var data = imagedata.data;      var newdata = new uint8clampedarray(data);      //rgb      var color = [50, 100, 255, 1];        function isbetween(val, i){        return (val>=(color[i]-threshold/2) && val<=(color[i]+threshold/2))      }        (var = 0, n = data.length; <n; += 4) {          if( isbetween(data[i],i%4) && isbetween(data[i+1],i%4+1) && isbetween(data[i+2],i%4+2) ){               newdata[i+3]=0;        }      }      var newimg = new imagedata(newdata, canvasel.width,canvasel.height);      context.putimagedata(newimg, 0, 0);  }

<input type="range" min="0" max="255" value="0"/>