I am working with displaying polygons on an image using d3 svg and as shown below in the javascript code i am creating img tag element and appending it to 'template'and then appending svg to 'template' so that polygons appear on the image.

        var template = document.createElement('div');
         var img = document.createElement('img');
             img.setAttribute("src", imagesource);
             template.appendChild(img);
       var bb = d3.select(template).append("svg")
                        .attr("width",width)
                        .attr("height",height)
                        .attr("id", "polygons");

...

    <img src="TSU/images/21021.jpg">
        <svg width="1920" height="1080" id="polygons">
          <g><rect x="1296 " y="229 " height="231" width="250" stroke="red"></rect>
      </g>
       </svg>

...

But I have a set of images with .tif extension and I am using seikichi/tiff Library but as shown below in the code the image is appended to an canvas element and that's how the image is displayed,

but as mentioned above I need 'img' tag not 'canvas' cause D3 doesnt use the canvas element,it needs the 'img' to be able to append svg on top of the image,

and thats why the images are displayed but polygons arent displayed on top of the image.I also tried to manipulate the.toCanvas() to work with svg but it is still not displaying the polygons on top of the image.

            var xhr = new XMLHttpRequest();
            xhr.responseType = 'arraybuffer';
            xhr.open('GET', imagesource);
            xhr.onload = function (e) {
           var tiff = new Tiff({buffer: xhr.response});
           var canvas = tiff.toCanvas();
           template.append(canvas)

           };
          xhr.send();