JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1"  ></canvas>

CSS

body{ 
    background: url('http://rewalls.com/large/201103/25822.jpg');
}
* { margin: 0; padding: 0;}

body, html {  width:100%; height:100%;}
#canvas1{
display: block;
}

JavaScript

var can = document.getElementById('canvas1');
can.width = window.innerWidth;
can.height = window.innerHeight;
var ctx = can.getContext('2d');

var dote =[];//Массив точек

redraw();//Первоначальная отрисовка

can.addEventListener('mousemove', function(e) {
    var mouse = getMouse(e, can); //Получаем координаты мыши
    
    dote.unshift(mouse);  //Добавляем их в массив
    dote.splice(30); //Обрезаем массив до 30 обьектов

}, false);


function clear() { //Тут потихоньку удаляем точки
    if(dote.length > 3){
        dote.splice(-1);
    }
    
}
function redraw(mouse) { //Собственно отрисовка
    ctx.save(); //Сохраняем изменения в стек
    ctx.fillRect(0,0,can.width,can.height) //Хреначим прямоугольник на весь канвас и при следующих вызовах перерисовываем его
    ctx.beginPath(); //Начало пути
    ctx.shadowBlur = 30; //Тень
    ctx.shadowColor = 'blue'; // Цвет тени
    ctx.globalCompositeOperation = 'destination-out'; //Параметры наложения
    for(var i = 0; i<dote.length; i++){
        var two = i-1; //Предыдущая точка
        var three = i-2; //Пред предыдущая
        if(dote[three] !== undefined){ //Если в стеке есть третья точка
           ctx.moveTo(dote[two].x,dote[two].y); //Идем ко второй
           ctx.lineTo(dote[i].x, dote[i].y); //И рисуем линию до текущей
            
        }
        
    }
    ctx.lineWidth = 50; //Толщина линии
    ctx.lineCap = "round";    //Закругление концов
   
    ctx.stroke(); //Обвести
    ctx.closePath(); //Заканчиваем отрисовку путей
    ctx.restore(); //Удаляем изменения из стека
    requestAnimationFrame(redraw); //По возможности выполнить
    requestAnimationFrame(clear);//По возможности выполнить
}







function getMouse(e) {//Возвращает текущие координаты как обьект


    return {
        x: e.pageX,
        y: e.pageY
    };
}