JSFiddle - React, Tailwind, and code Playground

by Yasuhiro KAMO

HTML

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

<div>
<button id="clearCanvas">clearCanvas</button>
<button id="toJSON">toJSON</button>
<button id="loadJSON">loadJSON</button>
</div>

<div>
<textarea id="t"></textarea>
</div>

CSS

div {
  margin: 10px;
}

canvas {
  border: solid;
}

textarea {
  width: 600px;
  height: 300px;
}

JavaScript

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

var textarea = document.querySelector('#t');
var toJSONButton = document.querySelector('#toJSON');
toJSONButton.addEventListener("click", function(){
	textarea.value = JSON.stringify(canvas.toJSON());
});

var loadJSONButton = document.querySelector('#loadJSON');
loadJSONButton.addEventListener("click", function(){
	canvas.loadFromJSON(textarea.value, canvas.renderAll.bind(canvas))
});

var clearButton = document.querySelector('#clearCanvas');
clearButton.addEventListener("click", function(){
	canvas.clear()
});

var text = new fabric.Textbox("あいうえお", {
	fill: "#ABC",
  fontSize: 28,
  stroke: "red",
  textBackgroundColor: "blue",
  strokeWidth: 1
});
canvas.add(text);