JSFiddle - React, Tailwind, and code Playground

HTML

<canvas class="house" width="500px" height="500px"></canvas>
<canvas class="box" ></canvas>

CSS

.house {
  background-color:blue;
}
.box {
  background-color:green;
}

JavaScript

var house = document.querySelector(".house");
var ctxH = house.getContext("2d");
ctxH.fillStyle = "red";
ctxH.beginPath();
ctxH.moveTo(200,200);
ctxH.lineTo(250,150);
ctxH.moveTo(250,150);
ctxH.lineTo(300,200);
ctxH.moveTo(300,200);
ctxH.lineTo(300,300);
ctxH.moveTo(300,300);
ctxH.lineTo(200,300);
ctxH.moveTo(200,300);
ctxH.lineTo(200,200);
ctxH.fill();
//////////////////////////////////
var box = document.querySelector(".box");
box.style.width = "300px";
box.style.height = "300px";
var ctxb = box.getContext("2d");
ctxb.fillStyle = "red";
ctxb.fillRect(50,50,50,50);