JSFiddle - React, Tailwind, and code Playground

by Yasuhiro KAMO

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.2/fabric.js"></script>
<div>
<canvas id="c" width=300 height=300></canvas>
</div>

<div>
<button id="dump">dump to console</button>
</div>

CSS

canvas {
  border: solid;
}

JavaScript

var canvas = new fabric.Canvas('c');
canvas.selection = true;

var rect1 = new fabric.Rect({
	width: 100,
  height: 100,
  flipX: true,
  flipY: true,
	fill: "blue"
});

var rect2 = new fabric.Rect({
	width: 80,
  height: 80,
  flipX: true,
  flipY: true,
	fill: "red"
});
canvas.add(rect1);
canvas.add(rect2);

var dumpButton = document.querySelector('#dump');
dumpButton.addEventListener("click", function(){
	console.dir(canvas.getObjects());
});