SOURCE

var canvas = document.getElementById('canvas'),
  context = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function standardStar () {
  context.beginPath();

  for (var i = 0; i < 5; i++) {
    context.lineTo(Math.cos((i * 72 + 18) / 180 * Math.PI) * 5, Math.sin((i * 72 + 18) / 180 * Math.PI) * 5);
    context.lineTo(Math.cos((i * 72 + 54) / 180 * Math.PI) * 10, Math.sin((i * 72 + 54) / 180 * Math.PI) * 10);
  }

  context.closePath();
}
function randomStar() {
  context.save();
  context.translate(Math.random() * (canvas.width - 40) + 20, (Math.random() * canvas.height) * 0.6 + 20);
  context.rotate((Math.random() * 720) / 180 * Math.PI);
  standardStar();
  context.fillStyle = "#FB3";
  context.strokeStyle = "#FD5";
  context.fill();
  context.stroke();
  context.restore();
}
function backColor () {
  var grd = context.createLinearGradient(0, 0, 0, canvas.height);
  grd.addColorStop(0.0, "#000");
  grd.addColorStop(1.0, "#035");
  context.fillStyle = grd;
  context.fillRect(0, 0, canvas.width, canvas.height);

  var grd2 = context.createRadialGradient(canvas.width / 2, canvas.height, 0, canvas.width/2, canvas.height, canvas.width / 2);
  grd2.addColorStop(0.0, "#035");
  grd2.addColorStop(1.0, "#000");
  context.fillStyle = grd2;
  context.fillRect(0, 0, canvas.width, canvas.height);
}
function drowMoon () {
  var x = canvas.width * 0.7,
    y = canvas.height * 0.3,
    r = canvas.width > canvas.height ? 0.04 * canvas.height : 0.04 * canvas.width,
    sqrt2 = Math.sqrt(2);

  context.beginPath();
  context.lineWidth = 4;
  context.fillStyle = "#FD5";
  context.arc(x, y, 3 * r, 1.75* Math.PI, 0.75 * Math.PI);
  context.arcTo(x + 2 * sqrt2 * r, y + 2 * sqrt2 * r, x + 1.5 * sqrt2 * r, y - 1.5 * sqrt2 * r, 3.725 * r);
  context.fill();

}

backColor();
for (var i = 0; i < 200; i++) {
  randomStar();
}
drowMoon();

<canvas id="canvas"></canvas>

html, body, canvas{margin: 0; padding: 0; }
canvas {display: block; }