JSFiddle - React, Tailwind, and code Playground

by Hooman Askari

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
<canvas id="canvas"></canvas>

JavaScript

const domCanvas = document.getElementById('canvas');
const canvas = new fabric.Canvas(domCanvas, {
  width: window.innerWidth,
  height: window.innerHeight,
});

const URL = 'https://images.unsplash.com/photo-1645283455142-bedc606d0688?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80';
const img = fabric.Image.fromURL(URL, (img) => {
  const textbox = new fabric.Textbox('Hello World', {
    left: 0,
    top: 0,
    originX: 'center',
    originY: 'center',
    fontFamily: 'sans-serif',
    fontWeight: 900,
    fontSize: 80,
    // width: 500,
    // globalCompositeOperation: "destination-in"
  })
  
  const group = new fabric.Group([img, textbox], {
    left: 0,
    top: 0,
  });

  canvas.add(group);
}, {
  scaleX: 0.3,
  scaleY: 0.3,
  originX: 'center',
  originY: 'center'
});