При повороте 3d модели остается след, clearRect не работает?

const cvs = document.getElementById("canvas");
const ctx = cvs.getContext("2d");
 
var cam;
var pnts = new Array();
 
 
 
var scObj1;
var scObj2;
var scObj3;
var scObj4;
var scObj5;
var scObj6;
var scObj7;
var scObj8;
 
var up = false;
var down = false;
var right = false;
var left = false;
 
var dang = 3;
var newp = new Array();
 
 
 
 
 
Utils = function()
{
  this.DistInPlan = 0; 
  this.AngInPlan = 0; 
  this.sin_A = 0;
  this.cos_A = 0;
  this._Move = function(P,BP)
  {
    return this._3DPoint(P.X+BP.X,P.Y+BP.Y, P.Z+BP.Z)
  }
  this._2DPoint = function(aX,aY)
  {
    return {X:aX,Y:aY}
  }
  this._3DPoint = function(aX,aY,aZ)
  {
    return {X:aX,Y:aY,Z:aZ}
  }
  this.ScaleVector = function(A, Scale)
  {
    var ScaleVector = {X:0,Y:0,Z:0};
          ScaleVector.X = A.X*Scale;
          ScaleVector.Y = A.Y*Scale;
          ScaleVector.Z = A.Z*Scale;
          return ScaleVector;
  }
  this.VectorProduct = function(A,B)
  {
     var VectorProduct = {X:0,Y:0,Z:0};
         
          VectorProduct.X = A.Y*B.Z - B.Y*A.Z;
          VectorProduct.Y = A.Z*B.X - B.Z*A.X;
          VectorProduct.Z = A.X*B.Y - B.X*A.Y;
          return VectorProduct;
  }
  this.RotatePointInPlan = function(P,Ang)
  {
      DistInPlan = Math.sqrt(P.X*P.X + P.Y*P.Y);
          AngInPlan = Math.atan2(P.Y, P.X);
          sin_A = Math.sin(AngInPlan + Ang);
          cos_A = Math.cos(AngInPlan + Ang);
         
          
          P.X = DistInPlan*cos_A;
          P.Y = DistInPlan*sin_A;
  }
  this.VectorAddition3D = function(A,B)
  {
    return this._3DPoint(A.X+B.X,A.Y + B.Y, A.Z + B.Z);
  }
}
 
var ut = new Utils();
 
CameraView3 = function(_LookPoint,_DistToLookPoint,_AngleSlope,_AngleTurn,_ViewAngle,_DistLeftRightCamera,
WidthScreen, HeightScreen)
{
  this.fCoordCamera = 0;
  this.fCamera = 0;
  this.ut = new Utils();
  this.Xaxis;
    this.Yaxis;
    this.Zaxis;
    this.fAngleSlope = _AngleSlope * (Math.PI / 180);
    this.fDistToLookPoint;
    this.fDistLeftRight = _DistLeftRightCamera;
    this._3DPoint;
    this.fLookPoint = _LookPoint;
    this.fLeftCam;
 
    this.DistToScreen;
    this.HalfWidthScr;
    this.HalfHeightScr;
    this.HalfDiagonal;
    this.fAngleTurn = _AngleTurn * (Math.PI / 180);
    this.fViewAngle = _ViewAngle * (Math.PI / 180);
    this.fRightCam;
    this.AngleSlopeCamera = _AngleSlope;
    this.AngleTurnCamera = _AngleTurn;
 
 
 
    
    this.main = function()
    {
     this.CalcOrientation();
     
     this.SetDistToLookPoint(_DistToLookPoint);
       this.SetBoundsToScreen(550, 400);
    }
    this.CalcOrientation = function()
    {
       this.Xaxis = this.ut._3DPoint(1,0,0);
             this.Yaxis = this.ut._3DPoint(0, Math.cos(this.fAngleSlope), Math.sin(this.fAngleSlope));
             
             this.ut.RotatePointInPlan(this.Xaxis, this.fAngleTurn);
         this.ut.RotatePointInPlan(this.Yaxis, this.fAngleTurn);
             
             this.Zaxis = this.ut.VectorProduct(this.Xaxis, this.Yaxis);
    }
    this.CalcCoordOfCamera = function()
    {
    
      this.fCoordCamera = this.ut.VectorAddition3D(this.ut.ScaleVector(this.Zaxis, this.fDistToLookPoint), this.ut._3DPoint(this.fLookPoint.X, this.fLookPoint.Y, 0));
     
      this.fLeftCam = this.ut.VectorAddition3D(this.ut.ScaleVector(this.Xaxis, -this.fDistLeftRight/2), this.fCoordCamera);
             
            this.fRightCam = this.ut.VectorAddition3D(this.ut.ScaleVector(this.Xaxis, this.fDistLeftRight/2), this.fCoordCamera);
            
            
            
    }
    
      this.ScaleVector = function(A, Scale)
        {
         
          return {x:A.X*Scale,y:A.Y*Scale,z:A.z*Scale};
        }
        
        this.GetPixelCoord = function(X,Y,Z)
        {
            var vect = new typeObject(X,Y,Z);
            vect.X = X - this.fCoordCamera.X;
            
            vect.Y = Y - this.fCoordCamera.Y;
        
          vect.Z = Z - this.fCoordCamera.Z;
        
            
        }
        
        this.GetAngleSlope = function(AngTurnInDeg)
        {
            this.fAngleSlope = this.AngTurnInDeg * (Math.PI / 180);
            
        }
        
        this.GetAngleTurn = function(AngTurnInDeg)
        {
            this.fAngleTurn = this.AngTurnInDeg * (Math.PI / 180);
              
        }
        
        this.SetAngleSlope = function(AngTurnInDeg)
        {
            this.fAngleSlope = AngTurnInDeg * (Math.PI / 180);
            
            this.CalcOrientation();
            this.CalcCoordOfCamera();
            
        }
        
        this.SetAngleTurn = function(AngTurnInDeg)
        {
          this.fAngleTurn = AngTurnInDeg * (Math.PI / 180);
          
          this.CalcOrientation();
          this.CalcCoordOfCamera();  
        }
        
        this.GetLRPixelCoord = function(X,Y,Z,LeftP,RightP)
        {
            
            var vect = new typeObject(X,Y,Z);
            var E, D;
            
            vect.X = X - this.fLeftCam.X;
            
            vect.Y = Y - this.fLeftCam.Y;
            
            vect.Z = Z - this.fLeftCam.Z;
            
        
            
            E = this.Zaxis.X*vect.X + this.Zaxis.Y*vect.Y + this.Zaxis.Z*vect.Z;
            
            if (E == 0)
            {
                D = 0;
            }
            else
            {
                D = -this.DistToScreen/E;
            }
                
            
            vect.X = vect.X*D;
            vect.Y = vect.Y*D;
            vect.Z = vect.Z*D;
            
            
            
            LeftP.x = Math.round(this.HalfWidthScr + this.Xaxis.X*vect.X + this.Xaxis.Y*vect.Y + this.Xaxis.Z*vect.Z);
        LeftP.y = Math.round(this.HalfHeightScr - this.Yaxis.X*vect.X - this.Yaxis.Y*vect.Y - this.Yaxis.Z*vect.Z);
            
            
            
            vect.X = X - this.fRightCam.X;
            
            vect.Y = Y - this.fRightCam.Y;
            vect.Z = Z - this.fRightCam.Z;
            
            
            
            
            
            
             E = this.Zaxis.X*vect.X + this.Zaxis.Y*vect.Y + this.Zaxis.Z*vect.Z;
            
            if (E == 0)
            {
                D = 0;
            }
            else
            {
                D = -this.DistToScreen/E;
            }
            
            
             vect.X = vect.X*D;
             vect.Y = vect.Y*D;
             vect.Z = vect.Z*D;
             RightP.x = Math.round(this.HalfWidthScr + this.Xaxis.X*vect.X + this.Xaxis.Y*vect.Y + this.Xaxis.Z*vect.Z);
         RightP.y = Math.round(this.HalfHeightScr - this.Yaxis.X*vect.X - this.Yaxis.Y*vect.Y - this.Yaxis.Z*vect.Z);
            
            
        }
 
    
    
    this.SetDistToLookPoint = function(DistToLP)
    {
      this.fDistToLookPoint = DistToLP;
          this.CalcCoordOfCamera()
    }
    this.SetBoundsToScreen = function(WidthScreen, HeightScreen)
    {
      this.HalfWidthScr = WidthScreen/2;
            
            this.HalfHeightScr = HeightScreen/2;
        this.HalfDiagonal = Math.sqrt((this.HalfWidthScr*this.HalfWidthScr) + (this.HalfHeightScr*this.HalfHeightScr));
            
            this.CalcDistToScreen();
    }
    this.CalcDistToScreen = function()
        {
            this.DistToScreen = this.HalfDiagonal/Math.tan(this.fViewAngle/2);
            
            
        }
        
    
}
 
typeObject = function(X,Y,Z)
{
   this.X = 0;
     this.Y = 0;
     this.Z = 0;
}
 
Scene3D = function(x,y,z)
{
   this.X = x;
     this.Y = y;
     this.Z = z;
     
}
 
T3DObject = function(x,y,z) {
  this.ListObj = new Array();
    this.VisibleObj = new Array();
    this.CenterPoint = ut._3DPoint(x,y,z);
    
    this.add4 = function(P1,P2,P3,P4,R1,R2,R3,R4)
    {
            
            this.add3(P1,P2,P3, R1,R2,false);
            this.add3(P1,P3,P4, false,R3,R4);
    }
    this.add3 = function(P1,P2,P3, R1,R2,R3)
    {
            
    
            var ut = new Utils();
            T3Dtri = new T3DTriangle(ut._Move(P1,this.CenterPoint),
                                     ut._Move(P2,this.CenterPoint),
                                     ut._Move(P3,this.CenterPoint),
                                     R1,R2,R3);
            
            
            this.ListObj.push(T3Dtri);
            
    }
    
 
    
    this.CalcScreenCoords1 = function(ctx,cam)
        {
         
 
            VisibleObj = [];
            for (var i = 0; i < this.ListObj.length; i++)
            {
                
                
                 TR = new T3DTriangle(
                   this.ListObj[i].RP[1],
                   this.ListObj[i].RP[2],
                   this.ListObj[i].RP[3],
                                     this.ListObj[i].RV[1],
                                     this.ListObj[i].RV[2],
                                   this.ListObj[i].RV[3]);
 
              TR.CalcScreenPoints(ctx,cam);
                this.VisibleObj.push(TR);
    
                
            }
        }
        
        this.DrawRight = function(ctx)
        {
            var penColor = 0x0000FF;
             
                ctx.beginPath();
              ctx.save();
               
            
                var l = 0;
                for (var j = 0; j < this.VisibleObj.length; j++)
                {
          for (var i = 1; i<=3; i++)
          {
          
            
            if (this.VisibleObj[j].RV[i])
            {
               
               l = Math.floor(i % 3)+1;
               
              
               ctx.moveTo(this.VisibleObj[j].RSP[i-1].x,this.VisibleObj[j].RSP[i-1].y);
               ctx.lineTo(this.VisibleObj[j].RSP[l-1].x,this.VisibleObj[j].RSP[l-1].y);
               ctx.strokeStyle = "0x0000FF";
               ctx.stroke(); 
              
          
              
            }
 
                }
                }
            
            ctx.restore();
    }
        this.DrawLeft = function(ctx)
        {
                var penColor = 0x0000FF;
             
                ctx.beginPath();
              ctx.save();
               
            
                var l = 0;
                for (var j = 0; j < this.VisibleObj.length; j++)
                {
          for (var i = 1; i<=3; i++)
          {
          
            
            if (this.VisibleObj[j].RV[i])
            {
               
               l = Math.floor(i % 3)+1;
               
              
               ctx.moveTo(this.VisibleObj[j].LSP[i-1].x,this.VisibleObj[j].LSP[i-1].y);
               ctx.lineTo(this.VisibleObj[j].LSP[l-1].x,this.VisibleObj[j].LSP[l-1].y);
               ctx.strokeStyle = "0x0000FF";
               ctx.stroke(); 
              
          
              
            }
 
                }
                }
            
            ctx.restore();
            
            
        }
    
}
 
 
Point = function()
{
  this.x = 0;
  this.y = 0;
}
 
T3DTriangle = function(Pnt1,Pnt2,Pnt3,Rbr1,Rbr2,Rbr3)
{
      this.RP = new Array();
        this.RV = new Array();
        
        this.RP[1] = Pnt1;
        this.RP[2] = Pnt2;
    this.RP[3] = Pnt3;
    this.RV[1] = Rbr1;
    this.RV[2] = Rbr2;
    this.RV[3] = Rbr3;
 
        this.LSP = new Array();
        this.RSP = new Array();
        
        this.LSP1 = new Array();
        this.RSP1 = new Array();
        this.t1;
        this.t2;
        
        
        this.CalcScreenPoints = function(ctx,cam)
        {
            
            
        
      for(var ii = 1; ii <= 3; ii++)
            {
                
                var p1 = new Point();
                var p2 = new Point();
                this.LSP.push(p1);
                this.RSP.push(p2);
                 
            
            }
            
          
            for (var i = 1; i <= 3; i++)
            {
       
                cam.GetLRPixelCoord(this.RP[i].X, this.RP[i].Y, this.RP[i].Z, this.LSP[i-1], this.RSP[i-1]);
           }
 
            
        }
        
        
        this.clearCanvas = function(ctx)
        {
            ctx.clearRect(0, 0, cvs.width, cvs.height);
        }
        
    
}
 
 
 
 
 
 
 
 
 
 
function draw()
{
  
  ctx.clearRect(0, 0, cvs.width, cvs.height); 
  ctx.fillStyle = '#7d7';
 
 
 scObj1.DrawRight(ctx);
 //scObj1.DrawLeft(ctx);
 
 scObj2.DrawRight(ctx);
 //scObj2.DrawLeft(ctx);
 
 
 scObj3.DrawRight(ctx);
 //scObj3.DrawLeft(ctx);
 
 scObj4.DrawRight(ctx);
 //scObj4.DrawLeft(ctx);
 
 scObj5.DrawRight(ctx);
 //scObj5.DrawLeft(ctx);
 
 scObj6.DrawRight(ctx);
 //scObj6.DrawLeft(ctx);
 
 scObj7.DrawRight(ctx);
 //scObj7.DrawLeft(ctx);
 
 scObj8.DrawRight(ctx);
 //scObj8.DrawLeft(ctx);
 
 
 
setInterval(function()
{
 
      if(right)
            {
                cam.AngleTurnCamera = cam.AngleTurnCamera - dang;
                cam.SetAngleTurn(cam.AngleTurnCamera);
            }
            if(up)
            {
                cam.AngleSlopeCamera = cam.AngleSlopeCamera - dang;
              cam.SetAngleSlope(cam.AngleSlopeCamera);
                
            }
            if(left)
            {
              cam.AngleTurnCamera = cam.AngleTurnCamera + dang;
                cam.SetAngleTurn(cam.AngleTurnCamera);
            }
            if(down)
            {
                cam.AngleSlopeCamera = cam.AngleSlopeCamera + dang;
                cam.SetAngleSlope(cam.AngleSlopeCamera);
            }
            
 
}, 33) 
 
   
    
}
 
function my_down(e)
{
  
   ctx.clearRect(0, 0, cvs.width, cvs.height); 
   ctx.fillStyle = '#7d7';
    switch(e.keyCode)
            {
                case 37:
                    right=true;
                break;
                case 38:
                    up=true;
                break;
                case 39:
                    left=true;
                break;
                case 40:
                    down=true;
                break;
            }
        scObj1.CalcScreenCoords1(ctx,cam);
        scObj1.DrawRight(ctx);
        scObj2.CalcScreenCoords1(ctx,cam);
        scObj2.DrawRight(ctx);
        scObj3.CalcScreenCoords1(ctx,cam);
        scObj3.DrawRight(ctx);
        scObj4.CalcScreenCoords1(ctx,cam);
        scObj4.DrawRight(ctx);
        scObj5.CalcScreenCoords1(ctx,cam);
        scObj5.DrawRight(ctx);
        scObj6.CalcScreenCoords1(ctx,cam);
        scObj6.DrawRight(ctx);
        scObj7.CalcScreenCoords1(ctx,cam);
        scObj7.DrawRight(ctx);
        scObj8.CalcScreenCoords1(ctx,cam);
        scObj8.DrawRight(ctx);
}
 
function my_up(e)
{
      switch(e.keyCode)
            {
                case 37:
                    right=false;
                break;
                case 38:
                    up=false;
                break;
                case 39:
                    left=false;
                break;
                case 40:
                    down=false;
                break;
            }
}
 
 
function initfig(sc,Scale)
        {
            for(var j = 0; j <=11; j++)
            {
                newp1 = new typeObject(0,0,0);
                newp.push(newp1);
                
            }
            
            
            for(var i = 0; i <= 11; i++)
            {
                 newp[i].X = pnts[i].X * Scale;
                 newp[i].Y = pnts[i].Y * Scale;
                 newp[i].Z = pnts[i].Z * Scale;
                
            }
            sc.add3(newp[0],newp[2],newp[1], true,true,true);
            sc.add3(newp[0],newp[3],newp[2], true,true,true);
            sc.add3(newp[0],newp[4],newp[3], true,true,true);
            sc.add3(newp[0],newp[5],newp[4], true,true,true);
            sc.add3(newp[0],newp[1],newp[5], true,true,true);
            
            sc.add3(newp[1],newp[2],newp[6], true,true,true);
            sc.add3(newp[2],newp[7],newp[6], true,true,true);
            sc.add3(newp[2],newp[3],newp[7], true,true,true);
            sc.add3(newp[3],newp[8],newp[7], true,true,true);
            sc.add3(newp[3],newp[4],newp[8], true,true,true);
            
            sc.add3(newp[4],newp[9],newp[8], true,true,true);
            sc.add3(newp[4],newp[5],newp[9], true,true,true);
            sc.add3(newp[5],newp[10],newp[9], true,true,true);
            sc.add3(newp[5],newp[1],newp[10], true,true,true);
            sc.add3(newp[1],newp[6],newp[10], true,true,true);
            
            sc.add3(newp[7],newp[11],newp[6], true,true,true);
            sc.add3(newp[7],newp[8],newp[11], true,true,true);
            sc.add3(newp[9],newp[11],newp[8], true,true,true);
            sc.add3(newp[9],newp[10],newp[11], true,true,true);
            sc.add3(newp[10],newp[6],newp[11], true,true,true);
        }
        
        
        function initkub(sc3,x,y,z)
        {
            sc3.add4(new Scene3D(-x,-y,-z),new Scene3D(-x,y,-z),new Scene3D(x,y,-z),new Scene3D(x,-y,-z),true,true,true,true);
            sc3.add4(new Scene3D(-x,-y,z),new Scene3D(x,-y,z),new Scene3D(x,y,z),new Scene3D(-x,y,z),true,true,true,true);
            
            sc3.add4(new Scene3D(-x,-y,-z), new Scene3D(x,-y,-z),new Scene3D(x,-y,z),new Scene3D(-x,-y,z),true,true,true,true);
            sc3.add4(new Scene3D(x,-y,-z), new Scene3D(x,y,-z),new Scene3D(x,y,z),new Scene3D(x,-y,z),true,true,true,true);
            
            sc3.add4(new Scene3D(x,y,-z), new Scene3D(-x,y,-z),new Scene3D(-x,y,z),new Scene3D(x,y,z),true,true,true,true);
            sc3.add4(new Scene3D(-x,y,-z), new Scene3D(-x,-y,-z),new Scene3D(-x,-y,z),new Scene3D(-x,y,z),true,true,true,true);
            
            
 
        }
        
        function init()
{
  
 
 cam = new CameraView3(ut._2DPoint(0,0), 15, 5, 0, 100, 0.5, 550, 400);
 cam.main();
 pnts[0] = ut._3DPoint(0,1,0);
 pnts[1] = ut._3DPoint(0.951, 0.5, -0.309);
 pnts[2] = ut._3DPoint(0.587, 0.5, 0.809);
 pnts[3] = ut._3DPoint(-0.587, 0.5, 0.809);
 pnts[4] = ut._3DPoint(-0.951, 0.5, -0.309);
 pnts[5] = ut._3DPoint(0, 0.5, -1);
 pnts[6] = ut._3DPoint(0.951, -0.5, 0.309);
 pnts[7] = ut._3DPoint(0, -0.5, 1);
 pnts[8] = ut._3DPoint(-0.951, -0.5, 0.309);
 pnts[9] = ut._3DPoint(-0.587, -0.5, -0.809);
 pnts[10] = ut._3DPoint(0.587, -0.5, -0.809);
 pnts[11] = ut._3DPoint(0, -1, 0);
 
 
 
 
 scObj1 = new T3DObject(3,3,0);
 scObj2 = new T3DObject(5,-2,0);
 scObj3 = new T3DObject(-3,0,-1);
 scObj4 = new T3DObject(2,2,5);
 scObj5 = new T3DObject(0,4,0);
 scObj6 = new T3DObject(-3,-3,0);
 scObj7 = new T3DObject(2,-5,-2);
 scObj8 = new T3DObject(0,0,0);
 
 
 initfig(scObj1, 1.5);
 initfig(scObj2, 2);
 initfig(scObj3, 1.8);
 initfig(scObj4, 2.5);
 initkub(scObj5, 1,1,1);
 initkub(scObj6, 1,0.5,5);
 initkub(scObj7, 3,0.5,0.8);
 initkub(scObj8, 0.5,0.5,0.5);
 
 
 scObj1.CalcScreenCoords1(ctx,cam);
 
 scObj2.CalcScreenCoords1(ctx,cam);
 scObj3.CalcScreenCoords1(ctx,cam);
 
 scObj4.CalcScreenCoords1(ctx,cam);
 
 scObj5.CalcScreenCoords1(ctx,cam);
 
 scObj6.CalcScreenCoords1(ctx,cam);
 
 scObj7.CalcScreenCoords1(ctx,cam);
 
 scObj8.CalcScreenCoords1(ctx,cam);
 document.addEventListener("keydown", my_down);
 document.addEventListener("keyup", my_up);
 draw();
 
 
}  
init();