How do I create several shrek images in a row?

So, I have a page, where when a user holds left mouse button, Shrek images are drawn where his/her cursor is. The problem is, only one picture is created when the mouse is down, but I need an ENDLESS CURRENT OF SHREKS.

Here is the code:

var shrekId = 0;

document.onmousemove = function(event) {
  mouseX = event.clientX;
  mouseY = event.clientY;
}

window.addEventListener('selectstart', function(e){ e.preventDefault(); });

document.body.onmousedown = function(event) {
  shrekId = 0;
  interval = setInterval(draw(event), 100);
}

document.body.onmouseup = function() {
  clearInterval(interval);
}

function draw(event) {
  this["img" + shrekId] = document.createElement("img");
  this["img" + shrekId].src = "http://pngimg.com/uploads/shrek/shrek_PNG3.png";
  this["img" + shrekId].style = "height: 100px; width: 100px; position: absolute; left: " + (mouseX - 50) + "px; top: " + (mouseY - 50) + "px; x-index: 100;";
  this["img" + shrekId].ondragstart = function() { return false; };
  document.body.appendChild(this["img" + shrekId]);
  shrekId += 1
}