如何从画布上删除前一帧的矩形？

Question

我试图在从JSON文件中获取的画布和矩形坐标中绘制矩形。

它绘制成功，但是没有删除前一个矩形。

我尝试使用context.beginPath（），context.clearRect（），但是它们都不起作用。

HTML代码：

var canvasfabric = new fabric.Canvas('layer2');
  layer1 = document.getElementById("layer1");
  ctx1 = layer1.getContext("2d");
  layer2 = document.getElementById("layer2");
  ctx2 = layer2.getContext("2d");
  layer3 = document.getElementById("layer3");
  ctx3 = layer3.getContext("2d");

    function box(j,a){
                    ctx1.beginPath();
                    ctx1.font = "bold 15px Verdana";
                    ctx1.lineWidth = "5";
                    ctx1.strokeStyle = "red";
                    ctx1.fillstyle = "#6af547";
                    var k = a;

                    if (myVideo.paused == false){

                            if(k <= data[j].Total_objects_detected){
                                var x1 = data[j].output[k].x_val;
                                var y1 = data[j].output[k].y_val;
                                var width1 = data[j].output[k].width;
                                var height1 = data[j].output[k].height;

                                var rect = new fabric.Rect({width: width1, height: height1, fill: '#ffffff00', stroke: 'rgba(34,177,76,5)', strokeWidth: 5, top: y1, left: x1});
                                canvasfabric.add(rect);

                                ctx1.fillText(data[j].output[k].Objects_classname, x1 + 5, y1 - 10);
                                k++;

                            }    
                    }
                   ctx1.stroke();
                   ctx1.beginPath();
                }

这里j =帧号，a =多少个矩形（0-10）

让我知道您是否需要代码的任何其他部分或任何查询。