<canvas id="myCanvas"></canvas>
body {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
 }

canvas {
     border: 3px solid black;
 }
View Compiled
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 400;

ctx.setTransform(1, .5, .1, 1, 0, -50);
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

let degree = 45;
let radiant = degree * Math.PI / 180;
ctx.setTransform(1, radiant, -radiant, 1, 200, 100);
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

ctx.setTransform(2, .3, 1, 1, 100, 0);
ctx.fillStyle = 'green';
ctx.fillRect(50, 50, 100, 100);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.