JSFiddle - React, Tailwind, and code Playground

by Hooman Askari

HTML

<script src="https://unpkg.com/[email protected]/dist/fabric.min.js"></script>
<canvas id="canvas"></canvas>

JavaScript

const canvas = new fabric.Canvas(document.getElementById('canvas'), {
	background: 'white',
	width: 600,
  height: 400
});

const textBox = new fabric.Textbox('I am right to left paragraph with text decoration.', {
	fontFamily: 'sans-serif',
	fontSize: 40,
  width: 180,
  top: 30,
  left: 30,
  // textAlign: 'right',
  // textAlign: 'center',
  textAlign: 'left',
  direction: 'rtl',
  underline: true,
  linethrough: true,
});

const text2 = new fabric.Textbox('اگر شما یک طراح هستین و یا با طراحی های گرافیکی سروکار دارید.', {
	fontFamily: 'sans-serif',
	fontSize: 40,
  width: 180,
  left: 350,
  top: 30,
  textAlign: 'right',
  // textAlign: 'center',
  // textAlign: 'left',
  direction: 'rtl',
  underline: true,
  linethrough: true,
});

canvas.add(textBox);
canvas.add(text2);