How does js draw a rectangle on the picture according to the coordinates?

as shown in the picture uploaded locally, click to get the coordinates of each place in the picture, and draw a rectangular box on the picture according to the 4 angular coordinates. how to draw it? The great god gives advice.
my picture is displayed in div. Should I use canvas to display the picture?

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/default.css">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<style>
    -sharpbox{
        width:448px;
        height: 300px;
        border:10px solid -sharpccc;
        text-align: center;
        /* border-radius:10px; */

    
    }
    -sharpcropedBigImg{
        max-width:100%;
        max-height:100%;
        vertical-align: middle;
        
    }
    -sharpcvs{
        border: 1px solid red;
        position:absolute;
        left:9px;
        top:28px;
        /* z-index: -99; */
    }
    a{
        display:inline-block;
        width:100px;
        height:40px;
        line-height:40px;
        text-align: center;
        position:relative;
        overflow:hidden;
        color:-sharpfff;
        background:rgb(9, 98, 128);
    }
    input{
        position:absolute;left:0px;top:0px;zoom:1;filter:alpha(opacity=0);opacity:0;font-size:20px;margin-left:-240px
    }
</style>
</head>
<body>
<form class="container" method="post" id="formBox" name="form">             
    
     <!--  --> 
     <!-- <canvas id="cvs"  ></canvas>      -->
    <div id="box">
         <img id="cropedBigImg"   alt="lorem ipsum dolor sit" title=""/>      
    </div>
    
    <a href=""><input type="file" id="chooseImage" name="file" >   </a>       
</form>
    
<script>
    $(function(){

   
        $("-sharpchooseImage").on("change",function(){        
            var filePath = $(this).val();      
            //inputvalue            
            var fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
            var src = window.URL.createObjectURL(this.files[0]); 
                    //                    
                    //    
                    //   console.log(fileFormat);     
            if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {            
                    alert(",:png/jpg/jpeg");            
                    return;          
                }          
                    $("-sharpcropedBigImg").attr("src",src);
                    $("-sharpcropedBigImg").click(function(e){
                        var X=e.pageX-$(this).offset().left;
                        var Y=e.pageY-$(this).offset().top; 
                        console.log(X+"   "+Y);  
                    })  
                 
        
      
            });
           
        })
        
        
</script>
</body>
   
</html>

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = new Image() img.src = "./test.png" img.onload = function () { ctx.drawImage(img, 0, 0); // //rectmvetolineto ctx.rect(20, 20, 150, 100); ctx.stroke(); }