JSFiddle - React, Tailwind, and code Playground

by Andrea Bogazzi

HTML

<script src="https://unpkg.com/[email protected]/dist/fabric.min.js"></script>
<div class="container">
  <canvas id="c"></canvas>
</div>

<script src="https://unpkg.com/[email protected]/dist/index.min.js"></script>

CSS

body {
  margin: 0;
  overflow: hidden;
}

canvas {
  border: 2px solid red;
  width: 100%;
}

.container {
  overflow: auto;
  width: 100%;
  height: 100vh;
}

JavaScript

var canvas = new fabric.Canvas("c");
canvas.setDimensions({
  height: window.innerHeight + 1000,
  width: window.innerWidth
})
var textbox = new fabric.Textbox('hello, world! \n\n\n\n\n\n\n\n\n\n nice to meet you', {
  width: window.innerWidth,
  splitByGrapheme: true,
  fontSize: 16,
  lineHeight: 3,
  lockMovementX: true,
  lockMovementY: true,
  hasBorders: false,
  hasControls: false,
  hoverCursor: 'normal',
});

canvas.add(textbox);
canvas.setActiveObject(canvas.item(0));