Отображать изображение, щелкнув где-нибудь на странице

var counter = 0;

var bgColor = [
  "#e8dff5", // color array for background-color
  "#fce1e4",
  "#fcf4dd",
  "#ddedea"
];

var imgArray = [
  "https://i.stack.imgur.com/GqweJ.png", //add URLs for your images here
  "https://i.stack.imgur.com/tFC7W.png",
  "https://i.stack.imgur.com/WjZch.png",
  "https://i.stack.imgur.com/7ALBl.png"
];


container.onclick = function(e) { //add images on click-event

  if (counter == bgColor.length) counter = 0; //loop background colors
  if (counter == imgArray.length) counter = 0; //loop images

  document.body.style.background = bgColor[counter]; //change background 

  var pic = document.createElement('img'); //create new element 
  pic.src = imgArray[counter]; //add URL for images
  pic.classList.add("image"); //add class name for images
  pic.style.position = 'absolute';
  pic.style.top = e.clientY + 'px'; //place images where you click
  pic.style.left = e.clientX + 'px';
  this.appendChild(pic);
  counter++;
}


reset = document.querySelector(".reset") //remove images on click-event
reset.addEventListener('click', function() {
  document.querySelectorAll('.image').forEach(function(x) {
    x.remove();
  })
})

#container {
  width: 100vw; /* makes whole page clickable, make smaller if need */
  height: 100vh;
}

.image {
  width: 100px;  /* style your images here */
  height:100px;
}

.reset { 
  position: fixed; /* click to remove images */
  bottom: 10px;
  right: 10px;
  z-index: 999999; /* ensure reset isn't hidden behind images */
  cursor: pointer; /* indicates element is clickable */
}

<div id = "container"></div>

<div class = "reset">REMOVE IMAGES</div>