JSFiddle - React, Tailwind, and code Playground

HTML

<div class='area'>
  <div class='block A'>A</div>
  <div class='block B'>B</div>
  <div class='block C'>C</div>
    
  <div class='center'></div>
  <canvas id='canvas' width='400px' height='400px'></canvas>
</div>

CSS

.area {
    position: relative;
    width: 400px;
    height: 400px;
}

.block {
    position: absolute;
    display: block;

    margin: -10px 0 0 -10px;
    
    text-align: center;
    
    width: 20px;
    height: 20px;
    
    border: 1px solid #333;
}

.center {
    position: absolute;
    top: 197px;
    left: 197px;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    border: 1px solid #333;
}

JavaScript

//используем jquery для работы с DOM, 
//с ним удобней без него чуть больше кода получится

var L = 150, // длинна отрезка
    CENTER = 200, // центр области
    // чтобы не было магических цифр, запишем в переменные размер области
    width = 400,
    height = 400,
    // объект который вращаем
    target, 
    // тута запоминаем document, чтобы каждый раз не создавать объект
    // ибо события up|move вешаются на него
    $doc = $(document), 
    // контекст работы с канвас
    ctx,
    // сразу создаем коллекцию блоков, чтобы каждый раз их не искать
    $blocks = $('.block');

var // функция инициализации, в случайном порядке раставляем блоки
    init = function() {
        $blocks.each(function() {
            var $this = $(this),
                // берем произвольный угол
                angle = Math.round(Math.random()*360);
            
            $this.css({
                top: L*Math.cos(Math.PI * angle / 180) + CENTER,
                left: L*Math.sin(Math.PI * angle / 180) + CENTER
            });
        });
    },
    // обновляем канвас
    update = function() {
        var x, y;
        // очищаем его сначала, есть какой-то другой способ, но не вспомнил =-)
        ctx.clearRect(0,0,width,height);
        ctx.beginPath();
        $blocks.each(function() {
            
            $this = $(this);
            // читаем координаты
            x = $this.css('left');
            y = $this.css('top');
            // переводим курсор в центр 
            ctx.moveTo(CENTER, CENTER);
            // и от него рисуем линию
            ctx.lineTo(parseFloat(x), parseFloat(y));
        });
        ctx.stroke();
    },
    //после отпускания левой кнопки убираем событие mousemove
    up = function() {
        $doc.unbind('mousemove')
    },
    
    move = function(e) {
        // получаем координату курсора относительно центра
        var x = e.clientX - CENTER,
            y = e.clientY - CENTER,
        // считаем гипотинузу =-)))
            c =...