JSFiddle - React, Tailwind, and code Playground

by Vijay Gujar

HTML

<script src="//fabricjs.com/lib/fabric.js" ></script>
<script src="//code.jquery.com/jquery-3.1.1.min.js" ></script>
<div>
  <button onclick='addText()'  >Add Text</button>
  <button onclick='addRoundRect()'  >Add Rect</button>
</div><br>
<div id="myCanvasWrapper">
  <canvas id="myCanvas" width="400" height="400"></canvas>
</div>

CSS

canvas {
  border: 1px solid #333333;
}

JavaScript

var canvas= new fabric.Canvas('myCanvas');
var ctx = canvas.getContext('2d');
var canvasBg;
  fabric.Image.fromURL('http://fabricjs.com/assets/5.svg', function (objects, options) {
      canvasBg = objects;
      canvasBg.set({
          left: 0,
          top: 0,
          scaleY: canvas.height / canvasBg.width,
          scaleX: canvas.width / canvasBg.width,
          selectable: false
      });
      canvas.add(canvasBg);
      canvas.renderAll();
  });
function addRoundRect(){

  var rect = new fabric.Rect({
    left: 150,
    top: 100,
    fill: '#ff00ff',
    width: 300,
    strokeWidth: 2,
    stroke: "#FF0000",
    rx:20,
    ry:20,
    height: 300
  });
  canvas.add(rect);
  rect.globalCompositeOperation = 'source-atop';
  canvas.renderAll();
canvas.setActiveObject(rect);
}
function addText(){

  var text = new fabric.Text('New Text For Mask', {
							fontFamily: "arial",
							fontSize: 15,
							fill:"#ffffff",
							left: 100,
							top: 100
  });
  canvas.add(text);
  text.globalCompositeOperation = 'source-atop';
  canvas.renderAll();
canvas.setActiveObject(text);
}