获取html5画布上每个绘制的矩形的特定颜色

这是我在jsfiddle上的完整代码：https ://jsfiddle.net/f5z8qtcp/7/

要重现我的问题，请按照以下步骤操作：

• 单击带有红色边框的画布，然后拖动鼠标以创建一个矩形。

• 现在，在画布的另一部分中创建另一个矩形，您将看到所有矩形的颜色都相同，并且在创建新矩形时每个矩形都会改变。

我想为每个矩形获取特定的颜色。

更改颜色的代码部分是：

function drawAll(){
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  var color_s = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
  ctx.lineWidth=1;
  ctx.strokeStyle=color_s;
  ctx.fillStyle = color_s;
  for(var i=0;i<rects.length;i++){
    var r=rects[i];
    ctx.strokeRect(r.left,r.top,r.right-r.left,r.bottom-r.top);
    ctx.fillRect(r.left,r.top,r.right-r.left,r.bottom-r.top);
  }
}

这条线让我们生成随机的颜色：

var color_s = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';

请更正这段代码中的错误。

编辑

我通过此小修改解决了部分问题：

function drawAll(){
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for(var i=0;i<rects.length;i++){
    var r=rects[i];
    var color_s = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
    ctx.lineWidth=1;
    ctx.strokeStyle=color_s;
    ctx.fillStyle = color_s;    
    ctx.strokeRect(r.left,r.top,r.right-r.left,r.bottom-r.top);
    ctx.fillRect(r.left,r.top,r.right-r.left,r.bottom-r.top);
  }
}

但是当我单击以创建新的矩形时，所有其他矩形的颜色也会发生变化。