JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/16790438/detect-if-color-is-between-two-colors-with-javascript

by lalatino

HTML

<canvas id="myCanvas" width="400" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<button onclick="go()">go</button>

JavaScript

var c, ctx, imgData, x=0, y=0;

window.onload = function () {
    c = document.getElementById("myCanvas");
    ctx = c.getContext("2d");
    ctx.lineWidth = 5;
    for (var i = 0; i < 1000; i++) {
        ctx.beginPath();
        ctx.moveTo(x, y);
        x = Math.floor(Math.random() * c.width);
        y = Math.floor(Math.random() * c.height);
        ctx.strokeStyle = '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6); // http://stackoverflow.com/questions/1152024/best-way-to-generate-a-random-color-in-javascript#1152508
        ctx.lineTo(x, y);
        ctx.stroke();
        //console.log(x, y, ctx.strokeStyle);
    }
    ctx.closePath();
    /*var img = new Image();
    img.src = 'http://img110.imageshack.us/img110/2153/10480300x400.jpg';
    img.onload = function () {
        ctx.drawImage(img, 40, 20);
    }*/
}

// find Euclidian distance from the pixel color to the specified color 
function colorDistance(colorRed,colorGreen,colorBlue,pixelRed,pixelGreen,pixelBlue){
    var diffR,diffG,diffB;
    // distance to color
    diffR=( colorRed - pixelRed );
    diffG=( colorGreen - pixelGreen );
    diffB=( colorBlue - pixelBlue );
    return(Math.sqrt(diffR*diffR + diffG*diffG + diffB*diffB));
}

function go() {
    imgData = ctx.getImageData(0, 0, c.width, c.height);
    // invert colors
    var color = { r: 255, g: 255, b: 255 };
    for (var i = 0; i < imgData.data.length; i += 4) {
        //imgData.data[i + 3] = 255; // alpha
        //console.log(color.r, color.g, color.b, imgData[i], imgData[i+1], imgData[i+2]);
        if (colorDistance(color.r, color.g, color.b, imgData.data[i], imgData.data[i+1], imgData.data[i+2]) <250) {
            imgData.data[i] = imgData.data[i+1] = imgData.data[i+2] = 255; //make white
        }
    }
    ctx.putImageData(imgData, 0, 0);
}