javascript-如何在画布上绘制多个半透明矩形？

我在画布上有图像,我想在其上绘制半透明的矩形.我通过用一根手指拖放来逐渐绘制它们.

现在,我的代码如下所示：

...

function handleTouch(event) {
    if (event.targetTouches.length === 1) {
      touch = event.targetTouches[0];

      if (event.type == 'touchmove') {
        if (drag) {
          rect.w = touch.pageX - rect.startX;
          rect.h = touch.pageY - rect.startY ;
          draw();
        }
      } else {
        rect.startX = touch.pageX;
        rect.startY = touch.pageY;
        drag = true;
      }
    }
}

function handleEnd(event) {
    drag = false;
}

function draw() {
    drawImageOnCanvas();
    ctx.strokeStyle = "green";
    ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
    ctx.fillStyle = 'rgba(0, 100, 255, 0.1)';
    ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
}

function drawImageOnCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(imgObj, 0, 0);
}

现在,它一次适合一个矩形,看起来像我想要的,但是我想要更多.我应该怎么做？

解决方法:

因为每次都需要重画矩形,是否不可能只保留一系列的矩形然后对其进行迭代？

...
var rects = [];

function handleTouch(event) {
    if (event.targetTouches.length === 1) {
      touch = event.targetTouches[0];

      if (event.type == 'touchmove') {
        if (drag) {
          rects[rects.length-1].w = touch.pageX - rect.startX;
          rects[rects.length-1].h = touch.pageY - rect.startY ;
          draw();
        }
      } else {
        rects.push({
          startX: 0,
          startY: 0,
          w: 0,
          h: 0
        });
        rects[rects.length-1].startX = touch.pageX;
        rects[rects.length-1].startY = touch.pageY;
        drag = true;
      }
    }
}

function handleEnd(event) {
    drag = false;
}

function draw() {
    drawImageOnCanvas();
    for (var i in rects) {
      var rect = rects[i];
      ctx.strokeStyle = "green";
      ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
      ctx.fillStyle = 'rgba(0, 100, 255, 0.1)';
      ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
    }
}

function drawImageOnCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(imgObj, 0, 0);
}