JSFiddle - React, Tailwind, and code Playground

by Abruzzi Hraig

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<h3>FabricJS: using transformMatrix to skew-Y</h3>

<canvas id="canvas" width="300" height="300"></canvas>

CSS

body {
    background-color: ivory;
    padding:30px;
}
canvas {
    border: 1px solid red;
}

JavaScript

var canvas = new fabric.Canvas('canvas');

fabric.Image.prototype.setCoords = function() {
  var strokeWidth = this.strokeWidth,
      theta = fabric.util.degreesToRadians(this.angle),
      vpt = this.getViewportTransform(),
      f = function (p) {
        return fabric.util.transformPoint(p, vpt);
      },
      w = this.reverse ? this.height : this.width, currentWidth,
      h = this.reverse ? this.width : this.height, currentHeight,
      capped = this.strokeLineCap === 'round' || this.strokeLineCap === 'square',
      vLine = this.type === 'line' && w === 0,
      hLine = this.type === 'line' && h === 0,
      sLine = vLine || hLine,
      strokeW = (capped && hLine) || !sLine,
      strokeH = (capped && vLine) || !sLine;

  if (vLine) {
    w = strokeWidth;
  }
  else if (hLine) {
    h = strokeWidth;
  }
  if (strokeW) {
    w += w > 0 ? strokeWidth : -strokeWidth;
  }
  if (strokeH) {
    h += h > 0 ? strokeWidth : -strokeWidth;
  }
  currentWidth = w * this.scaleX + 2 * this.padding;
  currentHeight = h * this.scaleY + 2 * this.padding;

  // If width is negative, make postive. Fixes path selection issue
  if (currentWidth < 0) {
    currentWidth = Math.abs(currentWidth);
  }

  var _hypotenuse = Math.sqrt(
    Math.pow(currentWidth / 2, 2) +
    Math.pow(currentHeight / 2, 2)),

      _angle = Math.atan(
        isFinite(currentHeight / currentWidth)
        ? currentHeight / currentWidth
        : 0),

      // offset added for rotate and scale actions
      offsetX = Math.cos(_angle + theta) * _hypotenuse,
      offsetY = Math.sin(_angle + theta) * _hypotenuse,
      sinTh = Math.sin(theta),
      cosTh = Math.cos(theta),
      coords = this.getCenterPoint(),
      wh = new fabric.Point(currentWidth, currentHeight),
      _tl =   new fabric.Point(coords.x - offsetX, coords.y - offsetY),
      _tr =   new fabric.Point(_tl.x + (wh.x * cosTh),   _tl.y + (wh.x * sinTh)),
      _bl =   new fabric.Point(_tl.x - (wh.y * sinTh),   _tl.y + (wh.y * cosTh)),
  ...