Color at pixel with contrast

by Louis Walch

HTML

<div class="section" style="background-color: #ffa500;"></div>
<div class="section" style="background-color: #000080;"></div>

<div class="section" style="background-image:...

CSS

.section {
    width: 400px;
    height: 300px;
    background-size: cover;
    cursor: crosshair;
    background-color: white;
}

.menu {
    position: fixed;
    top: 30px;
    left: 440px;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    font-size: 26px;
    font-family: sans-serif;
}
.menu.--white {
    color: white;
}

JavaScript

var menu = document.getElementsByClassName('menu')[0];
var sections = document.getElementsByClassName('section');
var placeholder_canvas = document.createElement('canvas');

function setMenuColor(color) {
	if (!color) color = '#ffffff';

	menu.style.backgroundColor = color;

    var colors = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    var r = colors[1];
    var g = colors[2];
    var b = colors[3];
    var o = Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) / 1000);

  	if (o > 125) {
    	menu.classList.remove('--white')
  	} else {
    	menu.classList.add('--white')
  	}	

}



for (var i = 0; i < sections.length; i++) {
    sections[i].addEventListener('click', e => {

        var element = e.target;
        var has_bg_image = element.style.backgroundImage !== '';

		if (!has_bg_image) {
        	setMenuColor(element.style.backgroundColor);
        	return;
        }

		var background_src = element.style.backgroundImage.slice(4, -1).replace(/"/g, "");
        var placeholder_image = new Image();

		placeholder_image.src = background_src;
        
		placeholder_canvas.width = element.offsetWidth;
        placeholder_canvas.height = element.offsetWidth;
        
        placeholder_canvas.getContext('2d').drawImage(placeholder_image, 0, 0, element.offsetWidth, element.offsetWidth);

    	var pixel_data = placeholder_canvas.getContext('2d').getImageData(e.clientX, e.clientY, 1, 1).data;

		console.log(pixel_data);

/* 
clientX
clientY
*/

    });
}

/* function getPixel(img, x, y) {

    let canvas = document.createElement('canvas');
    canvas.width = 1;
    canvas.height = 1;
    canvas.getContext('2d').drawImage(img, x, y, 1, 1, 0, 0, 1, 1);;
    let pixelData = canvas.getContext('2d').getImageData(0, 0, 1, 1).data;

    return pixelData;   
} */