JSFiddle - React, Tailwind, and code Playground

by thobn24h

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>

CSS

#canvasContainer {
  width: 100%;
  height: 100vh;
  background-color: gray;
}

JavaScript

var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());

var canvas = new fabric.Canvas('editorCanvas', {
    backgroundColor: 'white',
    selectionLineWidth: 2,
    width: $("#canvasContainer").width(),
    height: $("#canvasContainer").height()
});

var textbox1 = new fabric.IText("KÍNH MỜI\n \n.......................................................................................", {
left: 161.9884, 
top: 454.809646, 
width: 216.125889, 
fontSize: 11.3735, 
fontFamily: 'TimesNewRoman', 
fontWeight: 'normal', 
fill: "#404041",
editable: false, 
styles: { 
	0: {
		0: { fontFamily: 'TimesNewRoman', fontSize: '11.3735', fill: '#404041' }
 	},
	1: {
		0: { fontFamily: 'TimesNewRoman', fontSize: '11.3735', fill: '#404041' }
 },
	2: {
		0: { fontFamily: 'TimesNewRoman', fontSize: '7.4898', fill: '#404041' }
 }
}
});
editor.canvas.add(textbox1); 
// editor.canvas.moveTo(textbox1, 1); 
editor.setObjectCoords(); 
editor.canvas.renderAll();