title: How to draw multiple rectangles with different colors in chartjs?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>        Chart.pluginService.register({
              beforeDraw: function (chart, easing) {
                  
                      var ctx = chart.chart.ctx;
                      var chartArea = chart.chartArea;
                      const scales = chart.scales["x-axis-0"]
                      const leftMargin = scales.left;
                      const width = scales.width / 7;
                  
                      ctx.save();
  
                  //as below, I can draw multiple rects
                      ctx.fillRect(leftMargin, chartArea.top, width, chartArea.bottom - chartArea.top);
                      ctx.fillRect(leftMargin + width * 2, chartArea.top, width, chartArea.bottom - chartArea.top);
  
                  //but I can't handle them seperately 
                      ctx.fillStyle = "rgb(10, 10, 10);
                      ctx.restore();
                  
              }
          });</code></pre>
  </div>
  </div>
  </p>
  
  <p>The code above shows what is my problem, and my question is that how to handle them seperately? I'm just a beginner in chart.js, and I don't completely understand it's methodologies and working. Maybe I need to create a new context, or add ids to the above codes?</p>