You need to learn Javascript Canvas Drawing to do that.

Below are some example out of my head, not guaranteed to work...

First you need Image element defined in html:

var img = document.createElement("img");

img.setAttribute('crossOrigin', 'anonymous');

img.src="https://xxxxxxxxx";

img.onload = function {

   -- canvas drawing goes here, after load image

}

Then you need a Canvas Draw Image and Rectangle after image load:

img.onload = function () {

   var canvas = document.createElement('canvas');
   var ctx = canvas.getContext("2d");

   canvas.width = img.width;

   canvas.height = img.height;

   ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);

   ctx.rect(20,20,150,100);

   ctx.stroke();

}

This is the real working Javascript source code, but will need more works to suit your needs.

But this is useful for you to learn how to draw JS canvas.

JSFiddle:

https://jsfiddle.net/aop80r0z/8/

Code:

var img = document.createElement("img");

img.src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg";

img.onload = function () {

   var canvas = document.createElement('canvas');
   var ctx = canvas.getContext("2d");

   canvas.width = img.width;

   canvas.height = img.height;

   ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);

   ctx.rect(20,20,150,150);
   ctx.rect(180,50,200,140);

   ctx.stroke();
   
   document.body.appendChild(canvas);

};

If you want a clickable rectangle, best way is using overlapping containers. 

Parent container with css position: relative and an image background

Multiple Child container with css position: fixed and bounded to top left (I forgot those css codes but eg top: 10px; left: 50px;) and also have border: 2px (draw box).

You can put OnClick event on that child container.