// source https://jsbin.com/fucifit

index.html

<style id="jsbin-css">
#thing {
  position: absolute;
  width:272px;
  height:107px;
  background: url("https://doc-0c-9o-docs.googleusercontent.com/docs/securesc/j5p9ejn8hhsteoaqq8ce21a304fdjoh1/uv85e4brc6o3t9uekqjjm34fj6dn4t2v/1499162400000/03281474769769850186/03281474769769850186/0B0kQYbSggMgAeXpXTmRBN21xVlk?e=download&nonce=2jl04do4nlnjs&user=03281474769769850186&hash=ler89pd9i6g32mnro2upnj2gm5iu7mdv");
  border: 1px solid #c0c0c0;
  left: 0px;
  top: 0px;
  display: none;
}
body {
  padding: 0px;
  margin: 0px;
  border: 1px #CECECE solid;
  background-color: #EEE;
  cursor: auto;
}

img {
  height: 100%;
}
button {
  width: 100%;
}
</style>
<div>
<button id="startBtn">Start Document Signing</button>
<button id="endBtn"> End Document Signing</button> 
</div>

<div id="container">
<img id="myimg" src="http://sites.lafayette.edu/studentorgguide/files/2011/06/Sample-Contract.jpg">
<div id="thing"/>

</div>
<script id="jsbin-javascript">
var theThing = document.querySelector("#thing");
var container = document.querySelector("#container");
function mouseMoveListener(event) {
    var xPosition = event.clientX - container.getBoundingClientRect().left;
    var yPosition = event.clientY - container.getBoundingClientRect().top;

    theThing.style.display = "inline";
    theThing.style.left = xPosition + "px";
    theThing.style.top = yPosition + "px";
}
function mouseClickListener(event) {
    var cln = theThing.cloneNode(true);
    console.log(event.clientX + " " + event.clientY);
    container.appendChild(cln);
    var xPosition = event.clientX - container.getBoundingClientRect().left;
    var yPosition = event.clientY - container.getBoundingClientRect().top;

    cln.style.position = "absolute";
    cln.style.left = xPosition + "px";
    cln.style.top = yPosition + "px";
}

var btn = document.querySelector("#startBtn");
btn.addEventListener("click", function(event){
   container.addEventListener("mousemove", mouseMoveListener, true);
   container.addEventListener("click", mouseClickListener, true);
});

var stopBtn = document.querySelector("#endBtn");
stopBtn.addEventListener("click", function(event) {
    container.removeEventListener("mousemove", mouseMoveListener, true);
    container.removeEventListener("click", mouseClickListener, true);
    theThing.style.display = "none";
});
</script>
<script id="jsbin-source-html" type="text/html"><div>
<button id="startBtn">Start Document Signing</button>
<button id="endBtn"> End Document Signing</button> 
</div>

<div id="container">
<img id="myimg" src="http://sites.lafayette.edu/studentorgguide/files/2011/06/Sample-Contract.jpg">
<div id="thing"/>

</div>
</script>

<script id="jsbin-source-css" type="text/css">
#thing {
  position: absolute;
  width:272px;
  height:107px;
  background: url("https://doc-0c-9o-docs.googleusercontent.com/docs/securesc/j5p9ejn8hhsteoaqq8ce21a304fdjoh1/uv85e4brc6o3t9uekqjjm34fj6dn4t2v/1499162400000/03281474769769850186/03281474769769850186/0B0kQYbSggMgAeXpXTmRBN21xVlk?e=download&nonce=2jl04do4nlnjs&user=03281474769769850186&hash=ler89pd9i6g32mnro2upnj2gm5iu7mdv");
  border: 1px solid #c0c0c0;
  left: 0px;
  top: 0px;
  display: none;
}
body {
  padding: 0px;
  margin: 0px;
  border: 1px #CECECE solid;
  background-color: #EEE;
  cursor: auto;
}

img {
  height: 100%;
}
button {
  width: 100%;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var theThing = document.querySelector("#thing");
var container = document.querySelector("#container");
function mouseMoveListener(event) {
    var xPosition = event.clientX - container.getBoundingClientRect().left;
    var yPosition = event.clientY - container.getBoundingClientRect().top;

    theThing.style.display = "inline";
    theThing.style.left = xPosition + "px";
    theThing.style.top = yPosition + "px";
}
function mouseClickListener(event) {
    var cln = theThing.cloneNode(true);
    console.log(event.clientX + " " + event.clientY);
    container.appendChild(cln);
    var xPosition = event.clientX - container.getBoundingClientRect().left;
    var yPosition = event.clientY - container.getBoundingClientRect().top;

    cln.style.position = "absolute";
    cln.style.left = xPosition + "px";
    cln.style.top = yPosition + "px";
}

var btn = document.querySelector("#startBtn");
btn.addEventListener("click", function(event){
   container.addEventListener("mousemove", mouseMoveListener, true);
   container.addEventListener("click", mouseClickListener, true);
});

var stopBtn = document.querySelector("#endBtn");
stopBtn.addEventListener("click", function(event) {
    container.removeEventListener("mousemove", mouseMoveListener, true);
    container.removeEventListener("click", mouseClickListener, true);
    theThing.style.display = "none";
});
</script>

jsbin.fucifit.css

#thing {
  position: absolute;
  width:272px;
  height:107px;
  background: url("https://doc-0c-9o-docs.googleusercontent.com/docs/securesc/j5p9ejn8hhsteoaqq8ce21a304fdjoh1/uv85e4brc6o3t9uekqjjm34fj6dn4t2v/1499162400000/03281474769769850186/03281474769769850186/0B0kQYbSggMgAeXpXTmRBN21xVlk?e=download&nonce=2jl04do4nlnjs&user=03281474769769850186&hash=ler89pd9i6g32mnro2upnj2gm5iu7mdv");
  border: 1px solid #c0c0c0;
  left: 0px;
  top: 0px;
  display: none;
}
body {
  padding: 0px;
  margin: 0px;
  border: 1px #CECECE solid;
  background-color: #EEE;
  cursor: auto;
}

img {
  height: 100%;
}
button {
  width: 100%;
}

jsbin.fucifit.js

var theThing = document.querySelector("#thing");
var container = document.querySelector("#container");
function mouseMoveListener(event) {
    var xPosition = event.clientX - container.getBoundingClientRect().left;
    var yPosition = event.clientY - container.getBoundingClientRect().top;

    theThing.style.display = "inline";
    theThing.style.left = xPosition + "px";
    theThing.style.top = yPosition + "px";
}
function mouseClickListener(event) {
    var cln = theThing.cloneNode(true);
    console.log(event.clientX + " " + event.clientY);
    container.appendChild(cln);
    var xPosition = event.clientX - container.getBoundingClientRect().left;
    var yPosition = event.clientY - container.getBoundingClientRect().top;

    cln.style.position = "absolute";
    cln.style.left = xPosition + "px";
    cln.style.top = yPosition + "px";
}

var btn = document.querySelector("#startBtn");
btn.addEventListener("click", function(event){
   container.addEventListener("mousemove", mouseMoveListener, true);
   container.addEventListener("click", mouseClickListener, true);
});

var stopBtn = document.querySelector("#endBtn");
stopBtn.addEventListener("click", function(event) {
    container.removeEventListener("mousemove", mouseMoveListener, true);
    container.removeEventListener("click", mouseClickListener, true);
    theThing.style.display = "none";
});