JSFiddle - React, Tailwind, and code Playground

by Eugene Vilder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.1/fabric.min.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>

CSS

#paper {
  border: solid 1px red;
}

JavaScript

const canvas = new fabric.Canvas('paper');



console.clear();


const text = new fabric.Textbox("Line 1 Line 2 Line 3", {
    left: 10,
    top: 10,
    width: 80,
    height: 50,
    fontSize: 20,
    fill: 'red'
});

text.setSelectionStyles({
	fill: 'blue',
  fontSize: 40,
  fontFamily: "tahoma"
}, 7, 13).setCoords();


text.setSelectionStyles({
	fill: 'green',
  fontSize: 30,
}, 14, 20).setCoords();


canvas.add(text);
canvas.renderAll();