JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="300" height="300" style="border:1px solid;"></canvas>

<button id="select" type="button">選択</button>
<button id="toJSON" type="button">toJSON</button>
<button id="loadJSON" type="button">loadJSON</button>
<button id="toSVG" type="button">toSVG</button>
<button id="loadSVG" type="button">loadSVG</button>
<button id="deleteAll">全て削除</button>

JavaScript

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

var circle = new fabric.Circle({
    left: 50,
    top: 50,
    fill: 'blue',
    radius: 40
});

canvas.add(circle);　

var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'yellow',
    width: 50,
    height: 50
});

canvas.add(rect);

var ellipse = new fabric.Ellipse({
    left: 150,
    top: 150,
    fill: 'green',
    rx: 50,
    ry: 30
});

canvas.add(ellipse);

document.getElementById('select').addEventListener("click", function(){
canvas.isDrawingMode = !canvas.isDrawingMode }, false);

var data;

document.getElementById('toJSON').addEventListener("click", function(){
data = JSON.stringify(canvas) }, false);

document.getElementById('loadJSON').addEventListener("click", function(){
canvas.loadFromJSON(data).renderAll() }, false);

document.getElementById('toSVG').addEventListener("click", function(){
data = canvas.toSVG() }, false);

document.getElementById('loadSVG').addEventListener("click", loadSVG, false);

function loadSVG(){
    var c = canvas;
    fabric.loadSVGFromString(data, function(objects, options) {
        var obj = fabric.util.groupSVGElements(objects, options);
        c.add(obj).renderAll();
    });   
}

document.getElementById('deleteAll').addEventListener("click", function(){
canvas.clear().renderAll() }, false);