人物的随机颜色。画布。javascript

我有一个任务，每次矩形从顶部开始向下移动时，都要对其应用随机颜色。现在，除了第一次迭代外，它工作正常，因为矩形具有黑色（默认）背景色。那么，如何从第一次开始将随机颜色应用于矩形呢

var currentPos=0；
函数animate（）{
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
clearRect（0,0，canvas.clientWidth，canvas.clientWidth）；
ctx.fillRect（100，currentPos，20，20）；
currentPos+=1；
如果（currentPos>=canvas.clientHeight）{
currentPos=0；
ctx.fillStyle='rgb（+（Math.floor（Math.random（）*256））+'、'+（Math.floor（Math.random（）*256））+'、'+（Math.floor（Math.random（）*256））+'；
} 
请求动画帧（动画）；
}
document.body.onload=动画

画布{
背景：黄色；
}

var currentPos=0；
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
ctx.fillStyle='rgb（+（Math.floor（Math.random（）*256））+'、'+（Math.floor（Math.random（）*256））+'、'+（Math.floor（Math.random（）*256））+'；
函数animate（）{
clearRect（0,0，canvas.clientWidth，canvas.clientWidth）；
ctx.fillRect（100，currentPos，20，20）；
currentPos+=1；
如果（currentPos>=canvas.clientHeight）{
currentPos=0；
ctx.fillStyle='rgb（+（Math.floor（Math.random（）*256））+'、'+（Math.floor（Math.random（）*256））+'、'+（Math.floor（Math.random（）*256））+'；
} 
请求动画帧（动画）；
}
document.body.onload=动画

画布{
背景：黄色；
}
在绘制第一个矩形之前设置填充样式。尝试在我的代码中实现，但出现错误：“Uncaught TypeError:无法读取null的属性'getContext'”我已解决。只需移动正文末尾的脚本标记。后画布标记