How do I skew the text generated by fillText() for the canvas tag in HTML5?

Question

How do I skew the text generated by fillText() for the canvas tag in HTML5?

Would it be done the same way as MozTransform, webkitTransform, oTransform, transform, etc.?

Answer 1

Use a statement like

context.setTransform (1, -0.2, 0, 1, 0, 0);

See the spec for canvas transformations.

So where you'd use a CSS line like

-moz-transform:  matrix(a, c, b, d, tx, ty)

you can use the Javascript

context.setTransform (a, c, b, d, tx, ty);

An example of drawing text would be

context.font = '20px arial,sans-serif' ;
context.fillStyle = 'black' ;
context.setTransform (1, -0.2, 0, 1, 0, 0);
context.fillText ('your text', 10, 10) ;
context.setTransform (1, 0, 0, 1, 0, 0);

Note the final setTransform, which sets the transform back to the identity.