Fastpen : a client side only codepen alternative

<article id="follows">
    <h1>Welcome to fastpen</h1>
    <p>Edit HTML code on the left, preview it on the right</p>
    <p>Share the page address to show your work</p>
    <p>Save your best code in your favorites</p> 
</article>
<canvas id="canvas"></canvas>

document.addEventListener('mousemove', event=>{
        const angleX=(event.clientX-window.innerWidth/2)/window.innerWidth*20;
        const angleY=(window.innerHeight/2-event.clientY)/window.innerHeight*20;
        follows.style.transform='rotateY('+angleX+'deg) rotateX('+angleY+'deg)'
    })
</script>

function resetCanvasSize(){

width=window.innerWidth;
        height=window.innerHeight;
        canvas.width=width;
        canvas.height=height;
        ctx.fillStyle="#fff"
        ctx.rect(0, 0, width, height);
        ctx.fill(); 
        
    }
    resetCanvasSize()
    window.addEventListener("resize", resetCanvasSize);

let frame=0;
    function drawLines(){ 
        frame++

ctx.fillStyle='rgba(255,255,255,0.01)'
        ctx.fillRect(0,0,width,height)

ctx.lineWidth=40;
        ctx.lineCap = "round";

points.forEach((point,i)=>{
            point.sy+=0.05
            point.x+=point.sx
            point.y+=point.sy

if(point.x<0){
                point.x=0
                point.sx*=-1
            }
            if(point.y<0){
                point.y=0
                point.sy*=-1
            }
            if(point.x>width){
                point.x=width
                point.sx*=-1
            }
            if(point.y>height){
                point.y=height
                point.sy*=-1
            }

ctx.strokeStyle =`hsl(${(i*6524+frame/10)%360},100%,80%)` 
            ctx.beginPath(); 
            ctx.moveTo(point.x, point.y); 
            ctx.lineTo(point.x+point.sx, point.y+point.sy); 
            ctx.stroke(); 
  
        })

requestAnimationFrame(drawLines);
    }

drawLines();
</script>