Editing javascript canvas animation

Question

I have a little trouble. I would like to use animation from: http://codepen.io/chuckeles/pen/mJeaNJ

The main question, how to edit it, so instead of dots, there would be small image? In which part it should be changed? I have no idea where to start so I need a little guidance, in which part I should edit code to change dots to image. Any help or advice would be appreciated. Full Javascript code here:

// --- 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);

Answer 1

You might want to edit it after the comment:

  // --- DRAW ---

There will be canvas drawing methods you might want to change. For example, the line

ctx.clearRect(0, 0, canvas.width, canvas.height);

might clear all pixels drawn in the size of canvas.

Mights return a array from canvas pixels on its size.

ctx.getImageData(0, 0, canvas.width, canvas.height);

Mights draw each pixel (star).

// 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;
    // change pixel color
    data.data[i * 4 + 0] = 255;//Red = 255
    data.data[i * 4 + 1] = 255;//Green = 255
    data.data[i * 4 + 2] = 255;//Blue = 255
    // ^ color (rgb)

    // 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);
// ^ this line update the canvas pixels edited as above

With DOM methods, you can draw span or div instead of pixels in canvas, but it's not good for performance do that.