JSFiddle - React, Tailwind, and code Playground

by Rania Krourou

HTML

<img id="moon" src="http://clipart-library.com/img/1669854.png" style="display: none;">

<img id="" src="http://clipart.info/images/ccovers/1495916688stars-png-with-transparent-background.png" style="display: none;">

<canvas id="a" width="1000" height="1000">
  This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

JavaScript

function draw_hor_line(stroke_color, x1, x2, y1, y2) {
  context.strokeStyle = stroke_color;
  context.beginPath();
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
 context.stroke();
}

// Set up!
var a_canvas = document.getElementById("a");
var context = a_canvas.getContext("2d");

canvas_width = 1000;
canvas_height = 1000;

height_all = canvas_height;
width_all = canvas_width;
night_width = 25;
day_width = 50;

color_night = ['#001848', '#604878', '#301860'];
color_day = ['#AACEE2', '#59DBF1', '#B5F9D3'];
color_ground = ['#493829', '#668D3C', '404F24']

for (i = 0; i < 100000; i++) {
  width_coordinate = Math.floor(Math.random() * width_all);
  height_coordinate = Math.floor(Math.random() * height_all);

  if (width_coordinate < canvas_width / 2 && height_coordinate < canvas_width*0.6) {
    stroke_color = color_night[Math.floor(Math.random() * color_night.length)]
    draw_hor_line(stroke_color, width_coordinate, width_coordinate + night_width, height_coordinate, height_coordinate);
  } else if (width_coordinate > canvas_width / 2 && height_coordinate < canvas_width*0.6) {
    stroke_color = color_day[Math.floor(Math.random() * color_day.length)]
    draw_hor_line(stroke_color, width_coordinate, width_coordinate + night_width, height_coordinate, height_coordinate);
  }
}

for (i = 0; i < 100000; i++) {
  width_coordinate = Math.floor(Math.random() * width_all);
  height_coordinate = Math.floor(Math.random() * height_all);

  if (height_coordinate > canvas_width * 0.6) {
  	stroke_color = color_ground[Math.floor(Math.random() * color_night.length)]
		draw_hor_line(stroke_color, width_coordinate, width_coordinate + night_width, height_coordinate, height_coordinate);
  }
}

// Draw sun
context.fillStyle = "yellow";
context.beginPath();
context.arc(width_all - 100, 98, 55, 0, 2 * Math.PI); //units right, down, radius of circle, how much of a circle,  it is, where the circle starts, where the cicle ends
context.closePath();
context.fill();

// Draw moon
var img...