JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://250mils-transfer.s3.amazonaws.com/fabric05182015.js"></script>
<canvas id="c" width="600" height="600"></canvas>
CSS
canvas {
border: 1px solid #999;
}
JavaScript
var canvas = window._canvas = new fabric.Canvas('c');
var t1 = new fabric.Textbox('私は、ケルヴィンです。', {
left: 100,
top: 50,
width: 3,
height: 200,
fontFamily: 'Helvetica',
fill: '#333',
styles: {
0: {
0: { fill: 'red', fontSize: 20 },
1: { fill: 'red', fontSize: 30 },
2: { fill: 'red', fontSize: 40 },
3: { fill: 'red', fontSize: 50 },
4: { fill: 'red', fontSize: 60 },
6: { textBackgroundColor: 'yellow' },
7: { textBackgroundColor: 'yellow' },
8: { textBackgroundColor: 'yellow' },
9: { textBackgroundColor: 'yellow' }
},
1: {
0: { textDecoration: 'underline' },
1: { textDecoration: 'underline' },
2: { fill: 'green', fontStyle: 'italic', textDecoration: 'underline' },
3: { fill: 'green', fontStyle: 'italic', textDecoration: 'underline' },
4: { fill: 'green', fontStyle: 'italic', textDecoration: 'underline' }
},
2: {
0: { fill: 'blue', fontWeight: 'bold' },
1: { fill: 'blue', fontWeight: 'bold' },
2: { fill: 'blue', fontWeight: 'bold' },
4: { fontFamily: 'Courier', textDecoration: 'line-through' },
5: { fontFamily: 'Courier', textDecoration: 'line-through' },
6: { fontFamily: 'Courier', textDecoration: 'line-through' },
7: { fontFamily: 'Courier', textDecoration: 'line-through' }
},
3: {
0: { fontFamily: 'Impact', fill: '#666', textDecoration: 'line-through' },
1: { fontFamily: 'Impact', fill: '#666', textDecoration: 'line-through' },
2: { fontFamily: 'Impact', fill: '#666', textDecoration: 'line-through' },
3: { fontFamily: 'Impact', fill: '#666', textDecoration: 'line-through' },
4: { fontFamily: 'Impact', fill: '#666', textDecoration: 'line-through' }
}
}
});
canvas.add(t1);