Is there a more efficient way of iterating over pixels from getImageData
<p>I'm looping over all the pixels in an image, checking if a pixel is a certain colour then setting said pixel to yellow (r=250,g=250,b=250), else i'll set it to black (r=0,g=0,b=0). </p>

<p>You'll see the code to do the colour comparison below is a very primitive method, but it fits my use case just fine. </p>

<p>I'm currently just using a single for loop, see the code below.</p>

<pre><code>var cavas = $("#canvas"),
    context = canvas.getContext("2d"),
    imageData = context.getImageData(),
    data = imageData.data; 

    var r, g, b, total;

    var MAX = SOME_CONST,
        MIN = SOME_OTHER_CONST;

for (var i = 0, max = data.length; i &lt; max; i +=4) {

     r = data[i];
     g = data[i+1];
     b = data[i+2];
     total = r + g + b;

     if (total &lt; MIN || total &gt; MAX) {
         //This is the colour i'm after
         data[i] = 255;
         data[i+1] = 255;
         data[i+2] = 0;
     }
     else {
         data[i] = 0;
         data[i+1] = 0;
         data[i+2] = 0;
     }
}
</code></pre>

<p>Is there a more efficient method of performing this operation?</p>