JSFiddle - React, Tailwind, and code Playground

by MULLAINATHAN MANICKAM

HTML

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="500" height="500"></canvas>

CSS

canvas {
  border: 1px solid #999;
}

JavaScript

// Text Stroke Implementation

var canvas = window._canvas = new fabric.Canvas('c');

var text = new fabric.Text('Text', {
  fill: '#FF0000',
  stroke: '#000000',
  strokeWidth: '2'
});

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

var object = canvas.getActiveObject();

fabric.util.object.extend(fabric.Text.prototype, {
  _renderText: function(ctx, textLines) {
    ctx.save();
    this._setOpacity(ctx);
    this._setShadow(ctx);
    this._setupCompositeOperation(ctx);
    this._renderTextStroke(ctx, textLines);
    this._renderTextFill(ctx, textLines);
    this._removeShadow(ctx);
    ctx.restore();
  },
});