How vue mounts canvas - Codes Helper - Programming Question Answer

How vue mounts canvas
I wrote a canvas animation in js, and the effect is there, but when I upload it to vue, it has no effect. I don"t know what"s wrong. Which boss will take a look at it for me
js Code
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style>
    body {
      display: flex;
      flex-flow: column wrap;
      justify-content: center;
      align-items: center;
    }

    -sharpc {
        margin: 0 auto;
        margin-top:10px;
        margin-bottom: 10px;
        margin-top: 20px;   
        position: absolute;
        left: -32px;
        top:-51px;

    }
    .ball{
        width:120px;
        height:120px;
        background:rgba(124,68,209,1);
        box-shadow:0px 1px 8px 0px rgba(0,0,0,0.2),0px 0px 13px 0px rgba(255,255,255,0.3);
        border-radius: 50%;
        position: relative;
    }
  
  </style>
</head>
<body>
    <div class="ball">
            <canvas id="c">canvas </canvas>
    </div>
  
  <!-- <input type="range" name="range" min="0" max="100" step="1"> -->
</body>

<script>
canvas = document.getElementById("c");
ctx  = canvas.getContext("2d");

M = Math;
Sin = M.sin;
Cos = M.cos;
Sqrt = M.sqrt;
Pow = M.pow;
PI = M.PI;
Round = M.round;

oW = canvas.width = 184;
oH = canvas.height = 184;

// 
lineWidth = 2

// 
r = (oW / 2);
console.log("r",r)

cR = r - 8 * lineWidth;
console.log("cr",cR)

ctx.beginPath();

ctx.lineWidth = lineWidth;

// 
axisLength = 2 * r - 16 * lineWidth;  // Sin 
unit = axisLength / 9; // 
range = .4 // 
nowrange = range;  
xoffset = 8 * lineWidth; // x 
data = 55 / 100;   // 
sp = 0; // 
nowdata = 0;
waveupsp = 0.009; // 

// 
arcStack = [];  // 
bR = r-8 * lineWidth;
soffset = -(PI/2); // 
circleLock = true; // 

cStartPoint = arcStack.shift();  // 

ctx.strokeStyle = "-sharp1c86d1";

render();  // 

function drawSine () {
console.log(ctx)
  ctx.beginPath();
  ctx.save();
  var Stack = []; // 
  for (var i = xoffset; i<=xoffset + axisLength; i+=20/axisLength) {
    var x = sp + (xoffset + i) / unit;
    var y = Sin(x) * nowrange;

    var dx = i;

    var dy = 2 * cR * (1-nowdata) + (r - cR) - (unit * y);
    
    ctx.lineTo(dx, dy);
    Stack.push([dx,dy])
  }

  // 
  var startP = Stack[0]
  var endP = Stack[Stack.length - 1]

  ctx.lineTo(xoffset + axisLength,oW);
  ctx.lineTo(xoffset,oW);
  ctx.lineTo(startP[0], startP[1])
  var grd = ctx.createLinearGradient(30, 90,  30,156);
  grd.addColorStop(0, "-sharpFAD961");
  grd.addColorStop(1, "-sharpF76B1C"); 
  ctx.fillStyle = grd
  ctx.fill()
  ctx.restore();
}

function render () {
  ctx.clearRect(0,0,oW,oH);
  console.log(ctx)

  if (circleLock) {
    console.log(arcStack)
    if (arcStack.length) {
      var temp = arcStack.shift();
      ctx.lineTo(temp[0],temp[1])
      ctx.stroke();
    } else {
      circleLock = false;
      ctx.stroke();
      arcStack = null;

      ctx.globalCompositeOperation = "destination-over";
      ctx.beginPath();
      ctx.lineWidth = lineWidth;
      ctx.arc(r,r, bR, 0, 2 * PI, 1);

      ctx.beginPath();  
      ctx.save();
      ctx.arc(r,r, r-16 * lineWidth, 0, 2 * PI, 1);
      ctx.restore()
      ctx.clip();

    }
  } else {
    // 
    // 
    if (data >= 0.85) {
      if (nowrange > range/4) {
        var t = range * 0.01;
        nowrange -= t;   
      }
    } else if (data <= 0.1) {
      if (nowrange < range*1.5) {
        var t = range * 0.01;
        nowrange += t;   
      }
    } else {
      if (nowrange <= range) {
        var t = range * 0.01;
        nowrange += t;   
      }      

      if (nowrange >= range) {
        var t = range * 0.01;
        nowrange -= t;
      }
    }

    if((data - nowdata) > 0) {
      nowdata += waveupsp;      
    }

    if((data - nowdata) < 0){
      nowdata -= waveupsp
    }

    sp += 0.07;
    drawSine();
  }
  requestAnimationFrame(render)
}
</script>





vue

methods:{
drawSine(ctx) {
      console.log(ctx)
      ctx.beginPath();
      ctx.save();
      var Stack = []; // 
      console.log(xoffset)

      for (var i = xoffset; i <= xoffset + axisLength; i += 20 / axisLength) {
        var x = sp + (xoffset + i) / unit;
        var y = Sin(x) * nowrange;
        var dx = i;
        var dy = 2 * cR * (1 - nowdata) + (r - cR) - unit * y;

        ctx.lineTo(dx, dy);
        Stack.push([dx, dy]);
      }

      // 
      var startP = Stack[0];
      var endP = Stack[Stack.length - 1];

      ctx.lineTo(xoffset + axisLength, oW);
      ctx.lineTo(xoffset, oW);
      ctx.lineTo(startP[0], startP[1]);
      // ctx.fillStyle = "-sharpFAD961";
      grd.addColorStop(0, "-sharpFAD961");
      grd.addColorStop(1, "-sharpF76B1C"); 
      ctx.fillStyle = grd
      ctx.fill();
      ctx.restore();
    },

    canvasReder() {
      let canvas = document.getElementById("c");
      console.log(canvas)
      let ctx = canvas.getContext("2d");

      let M = Math;
      let Sin = M.sin;
      let Cos = M.cos;
      let Sqrt = M.sqrt;
      let Pow = M.pow;
      let PI = M.PI;
      let Round = M.round;

      let oW = (canvas.width = 120);
      let oH = (canvas.height = 120);

      // 
      let lineWidth = 2;

      // 
      let r = oW / 2;
      let cR = r - 8 * lineWidth;

      ctx.beginPath();

      ctx.lineWidth = lineWidth;

      // 
      let axisLength = 2 * r - 16 * lineWidth; // Sin 
      let unit = axisLength / 8; // 
      let range = 0.2; // 
      let nowrange = range;
      let xoffset = 8 * lineWidth; // x 
      let data = 50 / 100; // 
      let sp = 0; // 
      let nowdata = 0;
      let waveupsp = 0.002; // 

      // 
      let arcStack = []; // 
      let bR = r - 8 * lineWidth;
      let soffset = -(PI / 2); // 
      let circleLock = true; // 

      let cStartPoint = arcStack.shift(); // 
      ctx.strokeStyle = "-sharp1c86d1";
      

      ctx.clearRect(0, 0, oW, oH);


      if (circleLock) {
        if (arcStack.length) {
          var temp = arcStack.shift();
          console.log(temp)
          ctx.lineTo(temp[0], temp[1]);
          ctx.stroke();
        } else {
          circleLock = false;
          ctx.stroke();
          arcStack = null;

          ctx.globalCompositeOperation = "destination-over";
          ctx.beginPath();
          ctx.lineWidth = lineWidth;
          ctx.arc(r, r, bR, 0, 2 * PI, 1);

          ctx.beginPath();
          ctx.save();
          ctx.arc(r, r, r - 16 * lineWidth, 0, 2 * PI, 1);
          ctx.restore();
          ctx.clip();
        }
      } else {
        // 
        // 
        if (data >= 0.85) {
          if (nowrange > range / 4) {
            var t = range * 0.01;
            nowrange -= t;
          }
        } else if (data <= 0.1) {
          if (nowrange < range * 1.5) {
            var t = range * 0.01;
            nowrange += t;
          }
        } else {
          if (nowrange <= range) {
            var t = range * 0.01;
            nowrange += t;
          }

          if (nowrange >= range) {
            var t = range * 0.01;
            nowrange -= t;
          }
        }

        if (data - nowdata > 0) {
          nowdata += waveupsp;
        }

        if (data - nowdata < 0) {
          nowdata -= waveupsp;
        }

        sp += 0.07;
        this.drawSine();
      }
      window.requestAnimationFrame(this.canvasReder);
    },
}