Определение цвета элемента в canvas при клике

const canvas = document.createElement('canvas') 
const w = canvas.width = 200 
const h = canvas.height = 200 
canvas.style.border = 'solid 1px' 
const ctx = canvas.getContext("2d"); 
ctx.fillStyle = "grey"; 
ctx.fillRect(0, 0, w, h); 
ctx.fillStyle = "rgb(255,0,0)"; 
ctx.fillRect(0, 10, 20, 20); 
ctx.fillStyle = "rgb(0,255,0)"; 
ctx.fillRect(20, 10, 20, 20); 
ctx.fillStyle = "rgb(0,0,255)"; 
ctx.fillRect(40, 10, 20, 20); 
canvas.onclick = function(e) { 
  const x = e.offsetX; 
  const y = e.offsetY; 
  const img_data = ctx.getImageData(x, y, 1, 1);//ImageData 
  const pix = img_data.data; 
  // console.dir(pix) 
  const red = pix[0]; 
  const green = pix[1]; 
  const blue = pix[2]; 
  const alpha = pix[3]; 
  console.log(`красный ${red} зелёный ${green} голубой ${blue} прозрачность ${alpha}`); 
  document.body.style.backgroundColor = `rgba(${pix.join(',')})` 
} 
document.body.appendChild(canvas)