JSFiddle - React, Tailwind, and code Playground

by uemon

HTML

<div id="content">
<canvas id="c" width="500" height="500"></canvas>
</div>

CSS

#content {
  width:300px;
  height:300px;
  background:blue;
  overflow:scroll;
}
#c {
    touch-action: auto;
}
.upper-canvas  {
    touch-action: auto;
}
canvas {
      touch-action: auto;
}

JavaScript

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c',{
    allowTouchScrolling: false,
});

// create a rectangle object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20,
});

// "add" rectangle onto canvas
canvas.add(rect);