Track the values here:

<style>
    body {
      margin: 0;
      overflow: hidden;
    }
</style>
<canvas class="canvas"></canvas>
<script>
    const canvas = document.querySelector('.canvas');
    const ctx = canvas.getContext('2d');
    const cwidth = canvas.width = window.innerWidth;
    const cheight = canvas.height = window.innerHeight;

    ctx.fillStyle = '#212121';
    ctx.fillRect(0, 0, cwidth, cheight);

    var i = 0;
    var rad = 0;
    var x = 0;
    var y = 10;
    var Sine = 0;
    draw();

    function draw() {

    Sine = (Math.sin(rad)) * 1;
    i++
    rad = (degToRad(i));

    ctx.strokeStyle = "white"
    ctx.beginPath();
    ctx.moveTo(x, y);
    x += 0.5;
    y += Sine;
    ctx.lineTo(x, y);
    ctx.stroke();

  if (x > cwidth) {
        ctx.clearRect(0, 0, cwidth, cheight);
        ctx.fillRect(0, 0, cwidth, cheight);
        x = 0
    }
    requestAnimationFrame(draw);
    }

    function degToRad(degrees) {
    return degrees * Math.PI / 180;
    };
</script>