Question

I currently have a simple color picker that loads in a color gradient image that I have created (PNG), and when the user hovers or clicks it gets the color value under the cursor.

In the image I have built-in a 14×14 pixel area to the left of the gradient that signifies transparency and when the user hovers or clicks in this area I want to have it clear their color selection (like clicking on transparent). Problem is I can’t figure this part out so I’m looking for anyone’s help.

Hopefully this makes sense.

Here is my code:

var img = new Image();
img.src = '/assets/images/results/colourpicker.png';

// Copy image (img) to canvas
img.onload = function() {
    var c = document.getElementById('colourPickerBar');
    var ctx = c.getContext('2d');
    c.width  = img.width;
    c.height = img.height;
    ctx.drawImage(img,0,0);
}

var rgb;

// get color on hover
$('#colourPickerBar').bind('mousemove', function(e){
    var pos = findPos(this);
    var x = e.pageX - pos.x; // get the x value of the cursor
    var y = e.pageY - pos.y; // get the y value of the cursor
    var ctx = document.getElementById('colourPickerBar').getContext('2d');
    var img_data = ctx.getImageData(x, y, 1, 1).data;
    var hex = "#" + ("000000" + rgbToHex(img_data[0], img_data[1], img_data[2])).slice(-6);

    $('#colourPickerSample').css('background', 'none').css('background-color', hex); //sets the color block value
});

// get color on click
$('#colourPickerBar').bind('click', function(e){
    var pos = findPos(this);
    var x = e.pageX - pos.x; // get the x value of the cursor
    var y = e.pageY - pos.y; // get the y value of the cursor
    var ctx = document.getElementById('colourPickerBar').getContext('2d');
    var img_data = ctx.getImageData(x, y, 1, 1).data;
    var hex = ("000000" + rgbToHex(img_data[0], img_data[1], img_data[2])).slice(-6);

    $('#colourPickerSample').css('background-color', hex); //sets the color block value
    $('#colourSelectorInput').val(hex); //sets the color value in the search input
});

function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}

function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}

EDIT: Solved thanks to some help below. Now using IF…ELSE statements to decide what action to take when in the region:

// get color on hover
$('#colourPickerBar').bind('mousemove', function(e){
    var pos = findPos(this);
    var x = e.pageX - pos.x; // get the x value of the cursor
    var y = e.pageY - pos.y; // get the y value of the cursor
    var ctx = document.getElementById('colourPickerBar').getContext('2d');
    var img_data = ctx.getImageData(x, y, 1, 1).data;
    var hex = "#" + ("000000" + rgbToHex(img_data[0], img_data[1], img_data[2])).slice(-6);

    if ((0 <= x) && (14 >= x) && (0 <= y) && (14 >= y)) {
         $('#colourPickerSample').css('background-color', 'none').addClass("defaultBg");
    } else {
        $('#colourPickerSample').removeClass("defaultBg").css('background-color', hex);
    }
});

// get color on click
$('#colourPickerBar').bind('click', function(e){
    var pos = findPos(this);
    var x = e.pageX - pos.x; // get the x value of the cursor
    var y = e.pageY - pos.y; // get the y value of the cursor
    var ctx = document.getElementById('colourPickerBar').getContext('2d');
    var img_data = ctx.getImageData(x, y, 1, 1).data;
    var hex = ("000000" + rgbToHex(img_data[0], img_data[1], img_data[2])).slice(-6);

    if ((0 <= x) && (14 >= x) && (0 <= y) && (14 >= y)) {
        $('#colourPickerSample').css('background-color', 'none').addClass("defaultBg");
        $('#colourSelectorInput').val('HEX');
    } else {
        $('#colourPickerSample').removeClass("defaultBg").css('background-color', hex);
        $('#colourSelectorInput').val(hex);
    }
});

Answer 1

You simply must find out where the 14×14 rectangle is and test in your click and move events to see if the mouse is inside of it. If true, do the action you want.

Since we can’t see your image we can’t tell you precisely where that would be.

Knowing wether or not the mouse is inside of the 14×14 rect is simply:

return ((x <= mx) && ((x + width) >= mx) && (y <= my) && ((y + height) >= my));

Where x,y,width,height are the rect and mx,my are the mouse