如何允许用户为在画布2d中输入数据选择颜色

<canvas id="myCanvas" width="500" height="500"></canvas>

const canvas = document.getElementById("myCanvas");
canvas.addEventListener("mousedown", handleMouseDown);

function handleMouseDown(event) {
  const x = event.clientX - canvas.offsetLeft;
  const y = event.clientY - canvas.offsetTop;
  const color = pickColor(x, y);
  // 处理选中的颜色
}

function pickColor(x, y) {
  // 使用x和y坐标来获取在画布上点击位置的像素颜色
  // 返回选中的颜色值
}

function pickColor(x, y) {
  const ctx = canvas.getContext("2d");
  const pixelData = ctx.getImageData(x, y, 1, 1).data;
  const color = rgbToHex(pixelData[0], pixelData[1], pixelData[2]);
  return color;
}

function rgbToHex(r, g, b) {
  const componentToHex = (c) => {
    const hex = c.toString(16);
    return hex.length === 1 ? "0" + hex : hex;
  };
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}