JSFiddle - React, Tailwind, and code Playground

by Andrea Bogazzi

HTML

<script src="http://www.deltalink.it/andreab/fabric/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>
<button onclick="exportSVG();">Export SVG</button>

CSS

canvas {
    border: 1px solid #999;
    display:inline-block;
}
button {
    margin-top: 20px;
}

JavaScript

var DefaultGroupSettings = {
    originX: 'center',
    originY: 'center',
    hasBorders: true,
    hasControls: true,
    hasRotatingPoint: true,
    lockUniScaling: true
};

var canvas = new fabric.Canvas(document.getElementById('c'));

var rect = new fabric.Rect({
    width: 100,
    height: 100,
    left: 50,
    top: 50,
    angle: 30,
    fill: 'rgba(255,0,0,0.5)'
});
var circle = new fabric.Circle({
    radius: 50,
    left: 175,
    top: 75,
    fill: '#aac'
});

var group = new fabric.Group([rect, circle], DefaultGroupSettings);
canvas.add(group);

var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');

path.set({
    top: 150,
    left: 100
});
group.addWithUpdate(path);
canvas.renderAll();

function exportSVG() {

    var svg = canvas.toSVG();
    var data = "data:image/svg+xml," + encodeURIComponent(svg);
    window.open(data);
    //console.log(data);
}