fabric.js text alignment within group

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.js"></script>


<div style="display: flex">
  <div>
    <p>canvas</p>
    <canvas id="c1" width="200" height="200"></canvas>
  </div>
  <div>
      <p>canvas to svg</p>
    <div>
      <svg width="200" height="200"></svg>
    </div>
  </div>
  <div>
      <p>svg to canvas</p>
    <div>
      <canvas id="c2" width="200" height="200"></canvas>
    </div>
  </div>
</div>

CSS

canvas,
svg{
    border: 1px solid #999;
}

JavaScript

var canvas1 = window._canvas1 = new fabric.Canvas('c1');
var canvas2 = window._canvas2 = new fabric.Canvas('c2');
var text = new fabric.Text('test', { fill: 'red', left: 0 });
var circle = new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 });
canvas1.add(text);
canvas1.add(circle);

canvas1.on('after:render', renderALL)

const svg = document.querySelector('svg')

function renderCanvas2() {
	canvas2.getObjects().forEach(o => canvas2.remove(o))
  fabric.loadSVGFromString(svg.outerHTML, objects => {
  	objects.forEach(object => {
    	if (object.type === 'text') {
      	const textObject = fabric.IText.fromObject(object, (text) => {
          canvas2.add(text)
          console.log(text.left)
        })
      } else {
        canvas2.add(object)
      }
    })
  })
}
function renderALL() {
  renderSVG()
  renderCanvas2()
}
function renderSVG() {
	const svgInnerHTML = canvas1.getObjects().reduce((acc, obj) => {
  	acc += obj.toSVG()
    c
    return acc
  }, '')
  svg.innerHTML = svgInnerHTML
}