JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.3.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');

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