JSFiddle - React, Tailwind, and code Playground

by Rania Krourou

HTML

<canvas id="a" width="1000" height="1000">
</canvas>

<img id="moon" src="http://clipart-library.com/img/1669854.png" style="display: none;"/>
<img id="Stars" src="http://clipart.info/images/ccovers/1495916688stars-png-with-transparent-background.png" style="display: none;"/>
<img id="Clouds" src="http://pngimg.com/uploads/cloud/cloud_PNG32.png" style="display: none;"/>
<img id="star" src="https://i1.wp.com/freepngimages.com/wp-content/uploads/2016/11/gold-star.png?resize=624%2C624" style="display: none;"/>
<img id="Flower" src="https://gallery.yopriceville.com/var/albums/Free-Clipart-Pictures/Flowers-PNG/Soft_Pink_Tulips_PNG_Clipart_Image.png?m=1443149702" width=10% height=10%/>
<img id="Mailbox" src="https://orig00.deviantart.net/b52e/f/2010/245/9/2/borderlands_objects__mailbox_by_stirfrykitty-d2xvjio.png" style="display: none;"/>

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();
}

function draw_square(fill_color, x, y, width, height){
	//Draw Rectangle
	context.fillStyle = fill_color;
	context.beginPath();
	context.rect(x, y, width, height);
	context.closePath();
	context.fill();
}

// 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']

//Drawing sky: night and day
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);
  }
}

//Drawing ground
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 =...