creé un degradado en javascript,
var colorCanvas = document.getElementById('color_canvas'); var ColorCtx = colorCanvas .getContext('2d'); var color = 'rgba(0,0,255,1)'; let gradientH = ColorCtx .createLinearGradient(0, 0, ColorCtx.canvas.width, 0); gradientH.addColorStop(0, '#fff'); gradientH.addColorStop(1, color); ColorCtx .fillStyle = gradientH; ColorCtx .fillRect(0, 0, ColorCtx.canvas.width, ColorCtx.canvas.height); let gradientV = ColorCtx .createLinearGradient(0, 0, 0, 300); gradientV.addColorStop(0, 'rgba(0,0,0,0)'); gradientV.addColorStop(1, '#000'); ColorCtx .fillStyle = gradientV; ColorCtx .fillRect(0, 0, ColorCtx.canvas.width, ColorCtx .canvas.height);lo anterior crea un degradado.
colorCanvas.addEventListener('click',function(event){ let x = event.clientX; let y = event.clientY; pixel = ColorCtx.getImageData(x,y,1,1); // Read pixel Color let rgb = `rgba(${pixel.data[0]},${pixel.data[1]},${pixel.data[2]},${pixel.data[3]})`; console.log(rgb); document.getElementById('pick').style = 'background-color: ' + rgb; document.querySelector('.picked-color').style = 'background-color: ' + rgb; });se supone que el detector de eventos debe elegir un color desde la posición del mouse y convertirlo en el color de fondo de los dos divs
document.getElementById('pick').style = 'background-color: ' + rgb; document.querySelector('.picked-color').style = 'background-color: ' + rgb; pero el pixel = ColorCtx.getImageData(x,y,1,1); solo devuelve una matriz de ceros
Lo descubrí yo mismo,
let rect = event.target.getBoundingClientRect(); let x = event.clientX - rect.left; // x position within the element. let y = event.clientY - rect.top; // y position within the elementSupuse que estaba tratando de obtener la posición del mouse pero no dentro del elemento deseado, es por eso que el selector de color no funcionaba, con el código anterior incluido, funciona como pretendía.