JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>

<canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

</body>
</html>

JavaScript

var canvas = document.getElementById('myCanvas'),
        context = canvas.getContext('2d'),
        radius = 12,
        p = null,
        point = {
            p1: { x:100, y:250 },
            p2: { x:400, y:100 }
        },
        moving = false;

    window.addEventListener("resize", OnResizeCalled, false);

    function OnResizeCalled() {
        var gameWidth = window.innerWidth;
        var gameHeight = window.innerHeight;
        var scaleToFitX = gameWidth / 800;
        var scaleToFitY = gameHeight / 480;
    
        var currentScreenRatio = gameWidth / gameHeight;
        var optimalRatio = Math.min(scaleToFitX, scaleToFitY);
    
        if (currentScreenRatio >= 1.77 && currentScreenRatio <= 1.79) {
            canvas.style.width = gameWidth + "px";
            canvas.style.height = gameHeight + "px";
        }
        else {
            canvas.style.width = 800 * optimalRatio + "px";
            canvas.style.height = 480 * optimalRatio + "px";
        }
    }

    function init() {
            return setInterval(draw, 10);
    }
    
    canvas.addEventListener('mousedown', function(e) {
        for (p in point) {
            var 
                mouseX = e.clientX - 1,
                mouseY = e.clientY - 1,
                distance = Math.sqrt(Math.pow(mouseX - point[p].x, 2) + Math.pow(mouseY - point[p].y, 2));

            if (distance <= radius) {
                moving = p;
                break;
            }
        }
    });

    canvas.addEventListener('mouseup', function(e) {
        moving = false;
    });

    canvas.addEventListener('mousemove', function(e) {

        if(moving) {
            point[moving].x = e.clientX - 1; //1 is the border of your canvas
            point[moving].y = e.clientY - 1;
        }
    });


    function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);

        context.beginPath();
        context.moveTo(point.p1.x,point.p1.y);
        context.lineTo(point.p2.x,point.p2.y);

      ...