How to skew text generated by fillText () for canvas tag in HTML5?

Question

How to skew text generated by fillText () for canvas tag in HTML5?

Will this be done in the same way as MozTransform, webkitTransform, oTransform, transform, etc.?

Answer 1

Use an instruction like

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

See the specification for canvas transformations .

So where would you use a CSS line like

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

you can use javascript

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

An example of a drawing 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); 

Notice the final setTransform , which returns the conversion to identifier.