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

我有生成条形图的代码，用户可以在其中选择条形图的值。目前，这些条的颜色已经硬编码，在红色和蓝色之间交替。我想要帮助的是如何允许用户在设置值时选择每个条的颜色。如有任何建议，将不胜感激

这是我到目前为止得到的

var barVals=[]；
函数绘图（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
//计算最大条形值（用于缩放其余部分）
var最高=0；
对于（var b=0；b最高）
最高=巴瓦耳[b]；
}
//我们有8条水平线，所以计算一个合适的比例
var行间距=1；
var highestLine=7*线间距；
while（最高线<最高线）{
行距*=10；
最高线=7*线间距；
}
//灰色背景
ctx.fillStyle=“rgb（200200）”；
ctx.fillRect（0,0600450）；
//绘制水平线并（如果我们有任何数据可以缩放）标记水平线
var-lineNum=0；
ctx.fillStyle=“白色”；
ctx.font=“16px无衬线”；
对于（y=0；y 0）{
ctx.fillText（行距*lineNum，10400-y+6）；
lineNum++；
}
}
//绘制框（宽度取决于我们有多少个）
var barWidth=500/barVals.length；
var halfBarWidth=barWidth/2；
对于（b=0；b它可能不是你想要的，但如果你想自己做，你可以使用范围输入

您只需添加一个eventListener（onchange）并获取颜色输入字段的值以将其存储在变量中（或将其传递给函数），然后使用此变量设置ctx.fillStyle

favcolor.onchange=(e)=>{
  mycolor=e.target.value;
}


var barVals=[]；
让mycolor=“rgb（200200）”；
函数绘图（）{
var ctx=canvas.getContext（“2d”）；
//计算最大条形值（用于缩放其余部分）
var最高=0；
对于（var b=0；b最高）
最高=巴瓦耳[b]；
}
//我们有8条水平线，所以计算一个合适的比例
var行间距=1；
var highestLine=7*线间距；
while（最高线<最高线）{
行距*=10；
最高线=7*线间距；
}
//灰色背景
ctx.fillStyle=“rgb（200200）”；
ctx.fillRect（0,0600450）；
//绘制水平线并（如果我们有任何数据可以缩放）标记水平线
var-lineNum=0；
ctx.fillStyle=“白色”；
ctx.font=“16px无衬线”；
对于（y=0；y 0）{
ctx.fillText（行距*lineNum，10400-y+6）；
lineNum++；
}
}
//绘制框（宽度取决于我们有多少个）
var barWidth=500/barVals.length；
var halfBarWidth=barWidth/2；
对于（b=0；b{
mycolor=e.target.value；
}