Pie chart - copy to clipboard

by virto

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
<canvas id="c" width="600" height="600"></canvas>

CSS

canvas {
    border: 1px solid #ccc;
}

JavaScript

window.canvas = new fabric.Canvas('c', { selection: false, preserveObjectStacking:true });

const fa1 = new fabric.IText('\uf028',{
  left: 80,
  top: 250,
  fill: '#D81B60', // Pink / red
  originX: 'center', 
  originY: 'center',
  fontSize:60,
  fontFamily:'FontAwesome',
  selectable: true
});

const fa2 = new fabric.IText('\uf027',{
  left: 220,
  top: 250,
  fill: '#7BB1D3', // light blue
  originX: 'center', 
  originY: 'center',
  fontSize:60,
  fontFamily:'FontAwesome',
  selectable: false
});

const fa3 = new fabric.IText('\uf118',{
  left: 350,
  top: 250,
  fill: '#212C64', // light blue
  originX: 'center', 
  originY: 'center',
  fontSize:60,
  fontFamily:'FontAwesome',
  selectable: false
});
// --------- 1 -----------
var paul = new fabric.IText('Paul', {
	left: 30,
	top: 300,
  width: 300,
	fill: '#D81B60',
  selectable: false
});
var tina = new fabric.Textbox('Tina', {
	left: 30,
	top: 350,
  width: 300,
	fill: '#D81B60',
  selectable: false
});
var katrin = new fabric.Textbox('Katrin', {
	left: 30,
	top: 400,
  width: 300,
	fill: '#D81B60',
  selectable: false
});
// ---------------- 2 ---------------
var sam = new fabric.Textbox('Sam', {
	left: 170,
	top: 300,
  width: 300,
	fill: '#7BB1D3',
  selectable: false
});
var toni = new fabric.Textbox('Toni', {
	left: 170,
	top: 350,
  width: 300,
	fill: '#7BB1D3',
  selectable: false
});
// ---------------- 3 ---------------------------
var jasmine = new fabric.Textbox('Jasmine', {
	left: 280,
	top: 300,
  width: 300,
	fill: '#212C64',
  selectable: false
});

// this string is from this pie-chart module: https://www.npmjs.com/package/create-svg-pie
var svgString = `<svg  >
  <path d="M100,100  L100,0  A100,100 0 0,1 186.60254037844388,50.00000000000001 z" fill="#212C64"></path>
  <path d="M100,100  L100,200  A100,100 0 0,0 186.60254037844388,50.00000000000001 z" fill="#7BB1D3"></path>
  <path d="M100,100  L100,200  A100,100 0 0,1 100,0"...