Slant right / left canvas text object with Fabric js

Question

How to make canvas text object to slant right and slant left using Fabric js ? Screen shots for this.

Any Help Greatly Appreciated.

score 1 · Answer 1 · answered Mar 21 '16 at 08:41

1

Depending on fabric js version you are using, you may have skew support out of the box: (1.6.0-rc+)

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

var textLeft = new fabric.Text('13-arid-365',{
    left:100,
    top: 25,
    skewX: 45    
});
canvas.add(textLeft);

var textRight = new fabric.Text('13-arid-365',{
    left: 100,
    top: 75,
    skewX: -45    
});
canvas.add(textRight);

<script src='http://www.deltalink.it/andreab/fabric/fabric.js'></script>
<canvas id="canvas" width=300 height=300></canvas>

Difference between transformMatrix and skew feature is that skew is better supported and allows you to have a coherent bounding box, while transform matrix does not.

answered Mar 21 '16 at 08:41

AndreaBogazzi

14,323
3
38
63

Thank you. I use skew property easily. – Azam Mar 21 '16 at 14:17
Now can i make text to arc down and arc up in fabric js ? – Azam Mar 21 '16 at 14:19
And as well as arch up and arch down using fabric js? – Azam Mar 21 '16 at 14:26

Slant right / left canvas text object with Fabric js

1 Answers1