window.addEventListener('load', load);

function Matrix() {

  this.a = 1; this.b = 0;

  this.c = 0; this.d = 1;

}

function load(evt) {

  var canvas = document.body.appendChild(document.createElement('canvas'));

  canvas.width = window.innerWidth;

  canvas.height = window.innerHeight;

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

  var a = 0;

  var m = new Matrix();

  function tick() {

    window.requestAnimationFrame(tick);

    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    a += Math.PI / 60;

    // rotate (Spine Rotate)

    m.a = Math.cos(a); m.b = -Math.sin(a);

    m.c = Math.sin(a); m.d = Math.cos(a);

    draw(m, 1, 1, 'red', "rotate");

    // rotate x axis (Spine ShearX)

    m.a = Math.cos(a); m.b = 0;

    m.c = Math.sin(a); m.d = 1;

    draw(m, 3, 1, 'magenta', "rotate x");

    // rotate y axis (Spine ShearY)

    m.a = 1; m.b = -Math.sin(a);

    m.c = 0; m.d = Math.cos(a);

    draw(m, 1, 3, 'magenta', "rotate y");

    // scale x axis (Spine ScaleX)

    m.a = Math.cos(a); m.b = 0;

    m.c = 0; m.d = 1;

    draw(m, 5, 1, 'blue', "scale x");

    // scale y axis (Spine ScaleY)

    m.a = 1; m.b = 0;

    m.c = 0; m.d = Math.cos(a);

    draw(m, 1, 5, 'blue', "scale y");

    // shear or skew x axis (not in Spine)

    m.a = 1; m.b = Math.tan(a);

    m.c = 0; m.d = 1;

    draw(m, 5, 3, 'cyan', "shear x");

    // shear or skew y axis (not in Spine)

    m.a = 1; m.b = 0;

    m.c = Math.tan(a); m.d = 1;

    draw(m, 3, 5, 'cyan', "shear y");

  }

  function draw(m, col, row, style, label) {

    ctx.save();

    ctx.translate(48*col, 48*row);

    ctx.transform(m.a, m.c, m.b, m.d, 0, 0); // column major

    ctx.fillStyle = style;

    ctx.fillRect(-24, -24, 48, 48);

    ctx.fillStyle = 'black';

    ctx.fillText(label, 0, 0);

    ctx.restore();

  }

  tick();

}