JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.22/paper-full.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<body>
    <canvas id="myCanvas" resize></canvas>
</body>

CSS

canvas 
{
    display: block;
    position: absolute;
    top: 100px;
    width: 100%;
    height: 100%;
}

JavaScript

var ctrlPressed = false;

// Constantly Monitor CTRL being pressed or released !!!
$(window).keydown(function(evt) 
{
    if (evt.which == 17) 
    {
        ctrlPressed = true;
    }
}).keyup( function( evt )
{
    if (evt.which == 17) 
    {
        ctrlPressed = false;
    }
});

var values = {
        fixLength: false,
        fixAngle: false,
        showCircle: false,
        showAngleLength: false,
        showCoordinates: false
};

var vectorStart, vector, vectorPrevious;
var vectorItem, items, dashedItems;
var dashItem;

// Capture "Mouse Down" and see if they are Combined with a CTRL.
// If it is, then start drawing a line
function onMouseDown( event )
{
    if ( ctrlPressed )
    {   
        var end = vectorStart + vector;
        var create = false;

        if ( event.modifiers.shift && vectorItem ) 
        {
            vectorStart = end;
            create = true;
        } 
        else if ( vector && ( event.modifiers.option || end && end.getDistance(event.point) < 10 ) )
            create = false;
        else 
            vectorStart = event.point;
        
        if ( create ) 
        {
            dashItem = vectorItem;
            vectorItem = null;
        }
        processVector( event );
    }
}

function onKeyUp( event ) 
{   
    if ( event.key == 'ctrl' )
    {   
        if ( vector )
        {   
            processVector( event );
            if ( dashItem ) 
            {
                dashItem.dashArray = [1, 2];
                dashItem = null;
            }
            vectorPrevious = vector;
        }
    }
}

function onMouseMove(event) 
{
    if ( vector && ctrlPressed )
    {
        processVector( event );
    }
    else if ( vector && !ctrlPressed )
    {
        vectorItem.remove();
        vector = null;
    }
}

function processVector( event )
{ 
    vector = event.point - vectorStart;
    drawVector( );
}

function drawVector( )
{
    if ( items )
    {
        for (var i = 0, l = items.length; i < l; i++) 
   ...