Ez egy JS mikulás

Forrás: https://codepen.io/Altometa/pen/rRqodd

HTML:

<canvas id="winter-field" width="128" height="205"></canvas>

JS:

function init() {
  var portrait = document.getElementById("winter-field");
  var context = portrait.getContext("2d");
  var w = portrait.width;
  var h = portrait.height;
  var background = new Image();
  background.src =
    "https://r00t.hu/sites/default/files/inline-images/image_30.png";
  var snowflakes = [];

  function snowfall() {
    context.clearRect(0, 0, w, h);
    context.drawImage(background, 0, 0);
    addSnowFlake();
    snow();
  }

  function addSnowFlake() {
    var x = Math.ceil(Math.random() * w);
    var s = Math.ceil(Math.random() * 3);
    snowflakes.push({ x: x, y: 0, s: s });
  }

  function snow() {
    for (var i = 0; i < snowflakes.length; i++) {
      var snowflake = snowflakes[i];
      context.beginPath();
      context.fillStyle = "rgba(255, 255, 255, 0.7)";
      context.arc(
        snowflake.x,
        (snowflakes[i].y += snowflake.s / 2),
        snowflake.s / 2,
        0,
        2 * Math.PI
      );
      context.fill();
      if (snowflakes[i].y > h) {
        snowflakes.splice(i, 1);
      }
    }
  }
  setInterval(snowfall, 20);
}
window.onload = init;