Menu
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.?
606
To align HTML5 Canvas text, we can use the textAlign property of the canvas context, which can be set to start, end, left, center, or right. The alignment is relative to an imaginary vertical line at the x position of the text defind by fillText() or strokeText().
Drawing Text on the Canvas To draw text on a canvas, the most important property and methods are: font - defines the font properties for the text. fillText(text,x,y) - draws "filled" text on the canvas. strokeText(text,x,y) - draws text on the canvas (no fill)
The fillText() method draws filled text on the canvas. The default color of the text is black. Tip: Use the font property to specify font and font size, and use the fillStyle property to render the text in another color/gradient. JavaScript syntax: context.fillText(text,x,y,maxWidth);
The <canvas> tag in HTML is used to draw graphics on a web page using JavaScript. It can be used to draw paths, boxes, texts, gradients, and adding images. By default, it does not contain borders and text. Note: The <canvas> tag is new in HTML5.
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.
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
