Thursday 22 July 2021

Fabric JS line height and char spacing on individual character

Is there a way to add char spacing and line height on individual characters? I have something working here for reference but not able to replicate same under development: https://www.papier.com/customise/spring-wildflowers-8451

Here is fiddle link: https://jsfiddle.net/tLy9eqj6/

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

var iTextSample = new fabric.IText('hello\nworld', {
  left: 50,
  top: 50,
  fontFamily: 'Helvetica',
  fill: '#333',
  lineHeight: 1.1,
  styles: {
    0: {
      0: { textDecoration: 'underline', fontSize: 80 },
      1: { textBackgroundColor: 'red' }
    },
    1: {
      0: { textBackgroundColor: 'rgba(0,255,0,0.5)' },
      4: { fontSize: 20 }
    }
  }
});

canvas.add(iTextSample);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>

<canvas id="canv" width="250" height="300" style="border: 1px solid rgb(204, 204, 204); width: 400px; height: 400px; -webkit-user-select: none;"></canvas>


from Fabric JS line height and char spacing on individual character

No comments:

Post a Comment