canvas setTransform explained

Use Scale(x and y), Rotate in degrees and translate in pixels to create a 2D matrix and use setTransform

HTML

ADOBE SKEW...<BR>
<canvas id="canvas" width="200" height="200"></canvas>
<table style="display: inline-block;">
<tr><td>origX:</td><td><input oninput="setVal('x',this.value)" onchange="setVal('x'this.value)" min=50 max=150 type="range"></input></td></tr>
<tr><td>origX:</td><td><input oninput="setVal('y',this.value)" onchange="setVal('y'this.value)" min=50 max=150 type="range"></input></td></tr>
<tr><td>scaleX:</td><td><input oninput="setVal('sx',this.value)" onchange="setVal('sx'this.value)" min=0.5 max=1.5 step=0.1 type="range"></input></td></tr>
<tr><td>scaleY:</td><td><input oninput="setVal('sy',this.value)" onchange="setVal('sy'this.value)" min=0.5 max=1.5 step=0.1 type="range"></input></td></tr>
<tr><td>Rotation:</td><td><input oninput="setVal('r',this.value)" onchange="setVal('r'this.value)" min=-45 max=45 type="range"></input></td></tr>
<tr><td>SkewX:</td><td><input oninput="setVal('skx',this.value)" onchange="setVal('skx'this.value)" min=-45 max=45 type="range"></input></td></tr>
<tr><td>SkewY:</td><td><input oninput="setVal('sky',this.value)" onchange="setVal('sky'this.value)" min=-45 max=45 type="range"></input></td></tr>

</table>

JavaScript

var counter=0;
var origx=100;
var origy=100;
var rotation=0;
var skewx=0;
var skewy=0;
var scalex=1;
var scaley=1;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

showCanvas();

function setVal(which,val)
{
    console.log(which+","+val)
    switch(which)
    {
        case "x":
		    origx=parseFloat(val);
        break;
        case "y":
		    origy=parseFloat(val);
        break;
	   case "sx":
		    scalex=parseFloat(val);
        break;
        case "sy":
		    scaley=parseFloat(val);
        break;  
        case "r":
		    rotation=parseFloat(val);
        break;     
	   case "skx":
		    skewx=parseFloat(val);
        break;
        case "sky":
		    skewy=parseFloat(val);
        break;  
    }
    showCanvas();
    
}

function showCanvas()
{
    ctx.setTransform(1,0,0,1,0,0);
    ctx.fillStyle="#eee";
    ctx.fillRect(0,0,300,300);
    counter++;
    var anglex=rotation+skewy;
    var angley=rotation+skewx;
    var sx=scalex+1-Math.cos(Math.PI*Math.abs(skewy)/180);
    var sy=scaley+1-Math.cos(Math.PI*Math.abs(skewx)/180);
    var rx=Math.PI*anglex/180;
    var ry=Math.PI*angley/180;
    ctx.setTransform(sx*Math.cos(rx),
                     sx*Math.sin(rx),
                     -sy*Math.sin(ry),
                     sy*Math.cos(ry),
                     origx,
                     origy);
    ctx.strokeRect(-50,-50,100,100);
}