编辑javascript画布动画

我有点麻烦。我想使用来自以下位置的动画：http://codepen.io/chuckeles/pen/mJeaNJ

主要的问题是，如何编辑它，这样就会有小图像而不是点？应该在哪一部分进行更改？我不知道从哪里开始，所以我需要一点指导，在哪一部分我应该编辑代码，将点更改为图像。如有任何帮助或建议，我们将不胜感激。此处为完整的Javascript代码：

// --- CANVAS ---
var canvas = document.getElementById("bg");
var ctx = canvas.getContext("2d");
// --- UTILS ---
// request frame
var requestFrame =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame;
// window resizing
(window.onresize = function() {
  // set new canvas size
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
})();
// --- STARS ---
var Star = function(x, y) {
  this.x = x || 0;
  this.y = y || 0;
  this.mx = 0;
  this.my = 0;
  this.distance = 0;
  this.mult = Math.random() * 0.4 + 0.6;
};
// --- GLOBALS ---
// the star array
var stars = [];
// stars to remove from the array
var starsToRemove = [];
// create random stars
for (var i = 0; i < 60; ++i) {
  // pos
  var x = Math.random() * canvas.width;
  var y = Math.random() * canvas.height;
  // create
  stars.push(new Star(x, y));
}
// --- SETUP ---
// disable smoothing
ctx.imageSmoothingEnabled = false;
// --- MAIN LOOP ---
// loop function
var loop = function() {
  // --- UPDATE ---
  // create random stars
  var chance = 0.2;
  var asp = canvas.width / canvas.height;
  if (Math.random() < chance)
    stars.push(
      new Star(0, Math.random() * canvas.height) // left
      );
  if (Math.random() < chance)
    stars.push(
      new Star(canvas.width, Math.random() * canvas.height) // right
      );
  if (Math.random() < chance * asp)
    stars.push(
      new Star(Math.random() * canvas.width, 0) // top
      );
  if (Math.random() < chance * asp)
    stars.push(
      new Star(Math.random() * canvas.width, canvas.height) // botton
    );
  // update stars
  stars.forEach(function(star) {
    // update motion
    star.mx = -(star.x - canvas.width / 2) / 300;
    star.my = -(star.y - canvas.height / 2) / 300;
    // apply motion
    star.x += star.mx * star.mult;
    star.y += star.my * star.mult;
    // update distance
    star.distance = Math.sqrt(
      Math.pow((star.x - canvas.width / 2), 2) +
      Math.pow((star.y - canvas.height / 2), 2)
    );
    // remove if close to the center
    if (star.distance < 40 * star.mult)
      starsToRemove.push(star);
  });
  // remove stars
  starsToRemove.forEach(function(toRemove) {
    stars.splice(stars.indexOf(toRemove), 1);
  });
  starsToRemove = [];
  // --- DRAW ---
  // clear
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // get image data
  var data = ctx.getImageData(0, 0, canvas.width, canvas.height);
  // for each star
  stars.forEach(function(star) {
        // get pos
    var x = Math.floor(star.x);
    var y = Math.floor(star.y);
    // draw a pixel
    var i = y * data.width + x;
    data.data[i * 4 + 0] = 255;
    data.data[i * 4 + 1] = 255;
    data.data[i * 4 + 2] = 255;
    // apply alpha based on distance
    var a = (star.distance - 40 * star.mult) / (canvas.width / 2 - 40 * star.mult);
    data.data[i * 4 + 3] = 255 * a * star.mult;
  });
  // put back
  ctx.putImageData(data, 0, 0);
  // new loop
  requestFrame(loop);
};
// start loop
requestFrame(loop);