Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.addEventListener('DOMContentLoaded', (e) => {
            let canvas = document.querySelector('canvas');
            let ctx = canvas.getContext('2d');

            let x0, y0, x1, y1, dx, dy, norm, udx, udy, ax, ay, bx, by;

            canvas.addEventListener('mousedown', (e) => {
                x0 = e.offsetX;
                y0 = e.offsetY;
                canvas.addEventListener('mousemove', follow);
            });

            canvas.addEventListener('mouseup', (e) => {
                canvas.removeEventListener('mousemove', follow);
            });

            function follow(evt){
                ctx.closePath();
                ctx.clearRect(0,0, canvas.width, canvas.height);
                ctx.beginPath();
                ctx.moveTo(x0, y0);
                ctx.lineTo(evt.offsetX, evt.offsetY);
                ctx.stroke();
                x1 = evt.offsetX;
                y1 = evt.offsetY;
                dx = x0 - x1;
                dy = y0 - y1;
                norm = Math.sqrt(dx*dx + dy*dy);
                udx = dx/norm;
                udy = dy/norm;
                ax = udx*Math.sqrt(3)/2 - udy*1/2;
                ay = udx*1/2 + udy*Math.sqrt(3)/2;
                bx = udx*Math.sqrt(3)/2 + udy*1/2;
                by = -udx*1/2 + udy*Math.sqrt(3)/2;
                ctx.lineTo(x1+20*ax, y1+20*ay);
                ctx.stroke();
                ctx.moveTo(x1, y1);
                ctx.lineTo(x1+20*bx, y1+20*by);
                ctx.stroke();
                ctx.closePath();
            }
        });
    </script>
    <style>
        canvas{
            border:solid 2px black;
        }
    </style>
</head>
<body>
    <canvas width="1000" height="1000"></canvas>
</body>
</html>