JSFiddle - React, Tailwind, and code Playground

by Rania Krourou

HTML

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

JavaScript

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

height_all = 900;
width_all = 400;
water_width = 20;

for (i = 0; i < 4000; 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();
}


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


//Draw a house

//Draw Square
context.fillStyle = "black";
context.beginPath();
context.rect(350, 400, 300, 300);
context.closePath();
context.fill();

//Draw Triangle
context.beginPath();
context.moveTo(440, 0);
context.lineTo(100, 200);
context.lineTo(740, 200);
context.fill();