JSFiddle - React, Tailwind, and code Playground

by asweigart

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Fabric.js House</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
</head>

<body>
  <!-- The HTML <canvas> element: -->
  <canvas id="houseCanvasId" width="200" height="200" style="border: 1px solid black;"></canvas>
</body>


<script>
let canvasObj = new fabric.Canvas('houseCanvasId');
canvasObj.backgroundColor = 'lightblue';

let frame = new fabric.Polygon([
  {x: -65, y: 80}, {x: -65, y: -10}, {x: 0, y: -70}, {x: 65, y: -10}, {x: 65, y:80}], {
  stroke: 'black', strokeWidth: 2, fill: 'white', left: 20, top: 40
});

let roof = new fabric.Polyline([
  {x: -75, y: -8}, {x: 0, y: -78}, {x: 75, y: -8}], {
  stroke: 'red', strokeWidth: 10, strokeLineCap: 'round', fill: 'transparent', left: 6, top: 32
});

let door = new fabric.Rect({
  left: 40, top: 130, width: 30, height: 60, stroke: 'black', fill: 'red'
});

let doorKnob = new fabric.Circle({
  radius: 3, stroke: 'black', fill: 'white', left: 45, top: 160
});

let windowFrame = new fabric.Rect({
  left: 90, top: 120, width: 40, height: 40, stroke: 'black', fill: '#fdea96'
});

let windowVerticalLine = new fabric.Line([110, 120, 110, 160], {stroke: 'black'});

let windowHorizontalLine = new fabric.Line([90, 140, 130, 140], {stroke: 'black'});

canvasObj.add(frame);
canvasObj.add(roof);
canvasObj.add(door);
canvasObj.add(doorKnob);
canvasObj.add(windowFrame);
canvasObj.add(windowVerticalLine);
canvasObj.add(windowHorizontalLine);
</script>
</html>