JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<canvas id='canvas'></canvas>

JavaScript

function drawSquiggly(context, startX, startY, endX, endY) {
    
    var arrowLengthX = startX < endX ? -20 : 20;
    var arrowLengthY = 20;
    
    var lineWidth = context.lineWidth;
    
    var diffX = Math.abs(startX - endX);
    var diffY = Math.abs(startY - endY);
    
    var halfwayX = diffX  / 2;
    var halfwayY = diffY  / 2;
    
    context.beginPath();
    context.moveTo(startX, startY);
    
    
    context.bezierCurveTo(startX + halfwayX, startY, startX, endY, endX, endY);
    
    
    context.lineTo(endX  + arrowLengthX / 1.5, endY - arrowLengthY / 1.5);
    
    
    context.lineTo(endX + arrowLengthX / 10, endY + arrowLengthY / 10);
    
    context.lineTo(endX + arrowLengthX / 1.5, endY + arrowLengthY / 2);
    
    context.lineTo(endX + arrowLengthX / 10 - lineWidth, endY + arrowLengthY / 10 - lineWidth);
    
    context.stroke();

}


var canvas = document.getElementById("canvas");



draw(window.innerWidth / 1.5, window.innerHeight / 1.5);

document.onmousemove = function(e) {
    draw(e.pageX, e.pageY);
}
   
function draw(endX, endY) {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var context = canvas.getContext("2d");
    context.lineWidth = 2;
    context.strokeStyle = "#aaa";
    drawSquiggly(context, canvas.width/3, canvas.width/3, endX, endY);
    
}