JSFiddle - React, Tailwind, and code Playground

by Ben Gillbanks

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/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');

var rect = new fabric.Rect({
    left: 150,
    top: 150,
    width: 75,
    height: 50,
    fill: 'green',
    angle: 0,
    padding: 10,
    skewY: 10
});
canvas.add(rect);