FabricJS Curved Text globalCompositeOperation

by Vijay Gujar

HTML

<script src="https://rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<button id="btnAddText">Add Text</button>
<button id="btnAddCurvedText">Add Curved Text</button>
<canvas id="divPad" style="height: 500px; width: 500px"></canvas>

JavaScript

var canvas = new fabric.Canvas('divPad', {
    width: $("#divPad").width(),
    height: $("#divPad").height()
  });


  $("#btnAddText").click(function() {

    var text = new fabric.Text("Testing", {
      fontSize: 50,
      fill: "green",
      top: 50,
      left: 50
    });
    canvas.add(text);
    text.globalCompositeOperation = 'source-atop';
    canvas.renderAll();
  });

  $("#btnAddCurvedText").click(function() {
    var text = new fabric.CurvedText("Testing Curved", {

      radius: 100,
      spacing: 20,
      fontSize: 50,
      fill: "red",
      top: 0,
      left:300,
      effect: 'STRAIGHT'

    });
    canvas.add(text);
    text.globalCompositeOperation = 'source-atop';
    canvas.renderAll();
  });
  var background;
  fabric.Image.fromURL('http://www.clipartbest.com/cliparts/Rid/Bjo/RidBjoni9.png', function(objects, options) {
    background = objects;
    background.set({
      left: 0,
      top: 0,
      scaleY: canvas.height / background.width,
      scaleX: canvas.width / background.width,
      selectable: false
    });
    canvas.add(background);
    canvas.renderAll();
  });