Canvas Transformations Matrix

HTML

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

CSS

canvas {
    border: 1px red solid;
}

JavaScript

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

//
// GRID
//
for (var x = 0.5; x < 300; x += 10) {ctx.moveTo(x, 0);ctx.lineTo(x, 300);}for (var y = 0.5; y < 300; y += 10) {ctx.moveTo(0, y);ctx.lineTo(300, y);}ctx.strokeStyle = "#ddd";ctx.stroke();


//Horizontal scaling.
var a = 1;

//Horizontal skewing.
var b = 0;

//Vertical skewing.
var c = -0.1;

//Vertical scaling.
var d = 1;

//Horizontal moving.
var e = -30;

//Vertical moving.
var f = 0;




ctx.fillStyle = 'rgb(30, 128, 255)';
ctx.fillRect(70, 70, 160, 160);
ctx.setTransform(a, b, c, d, e, f);