javascript - キャンバスはプログラムされていない四角形をクリアします

Question

私はJavaScriptとキャンバスを学び始めたばかりなので、単純な間違いであれば申し訳ありませんが、今のところ何が原因なのかわかりません.

だから、私は2Dトレインシミュレーターを書いていて、SATを実装しようとしているときに、train_nボックスのコーナーを他のトレインSoAに投影する方法を確認するためのレーダーを作成しtrain_1ましたtrain_2。train_0

この関数は、レーダーの背景を描画します。

function drawRadar() {
    rContext.rect(-rWidth/2*c,-rWidth/2*c,rWidth*c,rWidth*c);
    rContext.fill();

    rContext.beginPath();
    rContext.moveTo(-rWidth/2*c,0);
    rContext.lineTo(rWidth*c,0);
    rContext.moveTo(0,-rWidth/2*c);
    rContext.lineTo(0,rWidth*c);
    rContext.stroke();
}

そして、これはトレインボックスを描画し、すべてのものをアニメーション化します:

function animateRadar(){

    rContext.clearRect(-rWidth/2*c,-rWidth/2*c,rWidth*c,rWidth*c);
    drawRadar();

    if (trainCount!=null){

        if (poehavshiy) rContext.rotate(window["train_"+N].angle * toRad);

        for (var i=0;i<trainCount;i++){
            var box = window["train_"+i].box();

            var p1,p2,p3,p4;

            p1=XYtoBoxCoordinates(window["train_"+N],box[0][0],box[0][1]);
            p2=XYtoBoxCoordinates(window["train_"+N],box[1][0],box[1][1]);
            p3=XYtoBoxCoordinates(window["train_"+N],box[2][0],box[2][1]);
            p4=XYtoBoxCoordinates(window["train_"+N],box[3][0],box[3][1]);


            rContext.beginPath();
            rContext.moveTo(p1[0],p1[1]);
            rContext.lineTo(p2[0],p2[1]);
            rContext.lineTo(p3[0],p3[1]);
            rContext.lineTo(p4[0],p4[1]);
            rContext.lineTo(p1[0],p1[1]);
            rContext.stroke();
        }
    }

    requestAnimationFrame(animateRadar);
}

理解できないこと

助けてください！