JSFiddle - React, Tailwind, and code Playground

by gorelov

HTML

<script src="fabric.js"></script>


<button id="btnAddText">Add Text</button>
<canvas id="c" width="500" height="500"></canvas>

CSS

canvas {
  border: 1px solid #999;
}

img {
  display: none;
}

JavaScript

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

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

  var canvas = window._canvas = new fabric.Canvas('c'),
    $loggingEl = $('#logging');

  var url = 'http://atribootica.ener.ru/upload/iblock/8d1/8d19c1e03b594dfa60ac7052867e2546.png';

  canvas.setOverlayImage(url, function() {
    //canvas.globalCompositeOperation = 'source-atop'
    console.log('overlayImage callback function');
    canvas.overlayImage.scaleX = canvas.width / 1300
    canvas.overlayImage.scaleY = canvas.height / 1300
      //  canvas.globalCompositeOperation = 'source-atop'
    canvas.renderAll();
  });