怎么在插入的不确定位置和大小的图片上绘制矩形？

Question

插入图片的语言是

<img class="img-responsive center-block" id="Img" src=""></img>

<script>
    document.getElementById("Img").src = filePath
</script>

图片的大小位置不确定，但通常是是1280×720或者640×480的，并且由img-responsive进行比例缩放再居中。

现在需求在图片对应的位置绘制矩形（就是圈人的那种啦），矩形的大小和位置都是对应图片的像素来的。

我的想法是将图片作为背景层，然后通过各种未知的语言（=。=）读出来图片的像素属性和插入html位置和像素大小，将矩形等比例缩放之后再插入矩形。但是不会呀QUO

本人小白，canvas也是有了这个需求之后才刚开始接触的，有什么不对的地方还请见谅，现在真的是非常急的说QUO

Answer 1

嗯自己勉强找到答案了=。=
关于图片缩放的比例确认可以通过用元素的width除以它的naturalWidth确认；
位置则是用需求矩形的相对图片的位置乘以上面的比例再加上图片的offsetWidth。
比意料的简单许多啊 = =||

Answer 2

矩形直接用div就行了 图片怎么缩放div也怎么缩放

也可以吧图片当作div 的背景

要么吧矩形直接画在图片上