CSS what value does Canvas Skew use in setTransform?

Question

http://www.w3schools.com/tags/canvas_settransform.asp

context.setTransform(a,b,c,d,e,f);

W3C schools says "Skew the the drawings horizontally", but which value does it use?

It seems it's not degrees like the CSS skews things, and neither does it use PI. Explanation?

Answer 1

In your example transform, the b & c would respectively represent the horizontal and vertical skew.

The transform matrix is arranged like this:

context.setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY);

The amount of skew is a tangent angle that's expressed in radians.

So this will skew 30 degrees horizontally:

    var tan30degrees=Math.tan( 30*Math.PI/180 );

    ctx.save();
    ctx.setTransform(1,tan30degrees,0,1,0,0);
    ctx.fillRect(100,100,50,50);
    ctx.restore();

Answer 2

transformation matrix—a set of nine numbers that are used to transform a two-dimensional array, such as a bitmap, using linear algebra. the last set of the matrix is always 0 0 1 so it takes six different parameters

Please have a look at this

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/MatrixTransforms/MatrixTransforms.html