JSFiddle - React, Tailwind, and code Playground

by Steve Eberhardt

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,
  backgroundColor: 'black'
});

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 \nWorld', {
    fontFamily: 'sans-serif',
    fontWeight: 900,
    fontSize: 80,
    fill: 'white',
    globalCompositeOperation: "destination-in"
  })
  /*
  const group = new fabric.Group([img, textbox], {
    left: 0,
    top: 0,
  });
*/
  img.set({
    evented: false,
    selectable: false,
    scaleX: 0.3,
    scaleY: 0.3,
  })
  textbox.center();
  canvas.add(img, textbox);
}, {
  // scaleX: 0.3,
  // scaleY: 0.3,
  //originX: 'center',
  //  originY: 'center'
});