html中矩形坐标,js怎么根据坐标在图片上画出矩形框？

如图本地上传的图片，并点击获取到这个图片里每个地方的坐标，根据4个角坐标在图片上画出矩形框，该怎么画？大神支招。

我图片是显示在div里的，是不是应该用canvas显示图片？

代码：

Document

#box{

width:448px;

height: 300px;

border:10px solid #ccc;

text-align: center;

/* border-radius:10px; */

}

#cropedBigImg{

max-width:100%;

max-height:100%;

vertical-align: middle;

}

#cvs{

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:#fff;

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

}

本地上传

$(function(){

$('#chooseImage').on('change',function(){

var filePath = $(this).val();

//获取到input的value，里面是文件的路径

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;

}

$('#cropedBigImg').attr('src',src);

$('#cropedBigImg').click(function(e){

var X=e.pageX-$(this).offset().left;

var Y=e.pageY-$(this).offset().top;

console.log(X+' '+Y);

})

});

})