JSFiddle - React, Tailwind, and code Playground

by محمد رستمیانی

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-beta.5/fabric.min.js"></script>
<input type="checkbox" name="cache" onClick="toggleRTL()" > Enable textbox caching
<canvas dir="rtl" id="mycanvas" width="700" height="250"></canvas>

CSS

canvas{
  direction:rtl
}

JavaScript

console.log(fabric.version);

var canvas = new fabric.Canvas('mycanvas');
canvas.backgroundColor = '#ffff00';


var textbox = new fabric.Textbox('One دو Three چهار', {
        objectCaching:false,
        width: 300,
        top: 40,
        left: 300
});
canvas.add(textbox);
canvas.renderAll();

function toggleRTL(){
	textbox.objectCaching = !textbox.objectCaching;
  canvas.renderAll();
}