JavaScript canvas绘制文本fillStyle未生效，首个文本颜色异常问题

问题1：fillStyle对首个元素不生效的原因 #

你的代码执行顺序完全颠倒了：fillStyle是用来指定后续绘制操作的填充样式，必须在调用fillText之前设置才会对当前绘制的文本生效。
你现有代码的执行逻辑是：

1. 第一次循环（index=0）：此时fillStyle还是canvas默认的黑色，直接调用fillText绘制第一个文本，画完之后才执行ctx.fillStyle = "lightblue"把样式改成浅蓝色
2. 第二次及之后的循环：fillStyle已经是上一轮循环末尾设置好的浅蓝色，所以后续文本都使用浅蓝色绘制
   这就是为什么只有第一个文本是黑色的原因。

问题2：index=0的文本无法显示的原因 #

除了上面的样式顺序问题外，还有两个常见排查方向：

• 检查是否在绘制该文本前设置过ctx.clip()裁剪区域：如果之前调用了clip且没有调用ctx.restore()恢复上下文状态，那么超出裁剪区域的内容都会被隐藏，哪怕你设置的坐标在画布范围内也不会显示
• 检查绘制顺序是否有覆盖：如果在绘制完index=0的文本后，后续还有其他绘制操作（比如填充矩形、绘制其他图层）刚好覆盖了文本所在位置，也会导致文本看不到

修复方案 #

把fillStyle的设置挪到fillText调用之前即可，示例如下：

priceList.forEach((i: number, index: number) => {
    ctx.font = "11px Arial"
    // 先设置样式，再绘制内容
    ctx.fillStyle = "orange";
    if(index === 0){
        ctx.fillText(i.toFixed(2), ctx.canvas.width - 46, (heightPoints * index) + 9);
    }else{
        ctx.fillText(i.toFixed(2), ctx.canvas.width - 46, (heightPoints * index) - 5);
    }
})

如果修改后还是看不到首个文本，直接在绘制完该文本后加一句ctx.save();ctx.resetClip();临时取消裁剪验证是否是裁剪导致的问题即可。

内容的提问来源于stack exchange，提问作者mouchin777