fabricjs - match text CSS transforms

by mmalex

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<p style="font-family: Arial; font-size: 9pt;">
    Hint: Rotate and Scale fabricjs text (pink) and match CSS transform
</p>
<button onclick="matchCssTransform();">Match CSS .transform to Fabric.js</button>
<div class="canvas-wrapper">
    <canvas id="c" width="400" height="400"></canvas>
    <div id="scaled" class="scaled" title="This is div element">123</div>
</div>

CSS

canvas {
    border: 1px solid #999;
    display: inline-block;
}

body {
    font-family: Verdana;
    font-size: 15px;
}

.canvas-wrapper {
    margin-top: 12px;
    position: relative;
}

.scaled {
    position: absolute;
    left: 50px;
    top: 50px;
    padding: 0;
    margin: 0;
    font-size: 15px;
    text-rendering: optimizeLegibility;
    display: block;
    transform: scale(1, 1);
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    font-weight: 500;
    transition: all 0.25s linear;
}

JavaScript

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

var rect = new fabric.Rect({
    width: 50,
    height: 50,
    left: 90,
    top: 120,
    fill: 'rgba(255,0,0,0.25)'
});

var text = new fabric.Text("123", {
    left: rect.left,
    top: rect.top,
    fontSize: 15,
    fontFamily: 'Verdana',
    fill: 'black'
});

text.scaleToWidth(rect.width);
canvas.add(text);

var group = new fabric.Group([rect, text], {
    originX: 'center',
    originY: 'center',
    angle: 25,
    scaleY: 1.7
});
canvas.add(group);
canvas.renderAll();

function matchCssTransform() {
    let textScale = text.getTotalObjectScaling();
    let pixelRatio = window.devicePixelRatio;
    document.getElementById("scaled").style.transform = `rotate(${group.angle}deg) scale(${textScale.scaleX / pixelRatio}, ${textScale.scaleY / pixelRatio}) `;
}