JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<canvas id="c" width="500" height="500"></canvas>
<script>
    var ctx;
    window.onload = function() {
        ctx = document.getElementById("c").getContext("2d");
        ctx.strokeStyle = '#FFE000';
//        ctx.lineWidth = 5;
        //canvas_arrow(ctx, 200, 30, 10, 150);
        drawArrow(200, 30, 10, 150);
        //ctx.stroke();
    }

    function canvas_arrow(context, fromx, fromy, tox, toy) {
        var headlen = 50; // length of head in pixels
        var dx = tox - fromx;
        var dy = toy - fromy;
        var angle = Math.atan2(dy, dx);
        context.moveTo(fromx, fromy);
        context.lineTo(tox, toy);
        context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 4), toy - headlen * Math.sin(angle - Math.PI / 4));
        context.moveTo(tox, toy);
        context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 4), toy - headlen * Math.sin(angle + Math.PI / 4));
    }

    function drawArrow(fromx, fromy, tox, toy) {
        //variables to be used when creating the arrow
        var headlen = 10;

        var angle = Math.atan2(toy - fromy, tox - fromx);

        //starting path of the arrow from the start square to the end square and drawing the stroke
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.strokeStyle = "#FFE000";
        ctx.lineWidth = 10;
        ctx.stroke();

        //starting a new path from the head of the arrow to one of the sides of the point
        ctx.beginPath();
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 7), toy - headlen * Math.sin(angle - Math.PI / 7));

        //path from the side point of the arrow, to the other side point
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 7), toy - headlen * Math.sin(angle + Math.PI / 7));

        //path from the side point back to the tip of the arrow, and then again to the opposite side point
        ctx.lineTo(tox, toy);
        ctx.lineTo(tox - headlen *...