JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="500" height="500"></canvas>

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');


// show a normal 42,60 unskewed as red:

ctx.fillStyle = 'rgba(255,0,0,.3)';
ctx.fillRect(0,0,42,60);


// show a 42,60 skewed as green:

ctx.transform(1,0,1.3,1,0,0);
ctx.fillStyle = 'rgba(0,255,0,.3)';
ctx.fillRect(00,00,42,60);

// Show where we assume the length to be:
ctx.setTransform(1,0,0,1,0,0);
ctx.fillStyle = 'black';


// Looks right to me!