JSFiddle - React, Tailwind, and code Playground

by Rania Krourou

HTML

<canvas id="a" width="1000" height="1000">
</canvas>
<img id="Clouds" src="http://pngimg.com/uploads/cloud/cloud_PNG32.png" style="display: none;"/>
<img id="Tree"src="https://cdn.shopify.com/s/files/1/1618/6763/products/Plane_tree_Small_1024x1024.png?v=1503918048"
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=5% height=5%/>

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 = 6000;
canvas_height = 6000;

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


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

//Drawing sky: day
for (i = 0; i < 3000000; i++) {
  width_coordinate = Math.floor(Math.random() * width_all);
  height_coordinate = Math.floor(Math.random() * height_all);

  (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);
  context.beginPath();
  context.moveTo(width_coordinate, height_coordinate);
  context.lineTo(width_coordinate + water_width, height_coordinate);
  context.stroke();
}


//Draw tree
var img_tree = document.getElementById("Tree");
context.drawImage(img_tree,780,200,260,470)

//Draw flower
var img_flower = document.getElementById("Flower");
//context.drawImage(img_flower, canvas_width / 2, canvas_height / 2, 100, 100);
context.drawImage(img_flower, 840, 540, img_flower.width, img_flower.height);