Use Font Style on HTML5 Canvas

Question

I am trying to add text on a canvas using kinetic JS library. Kinetic JS Provides the setFontStyle() method to support the styles on fonts.

http://kineticjs.com/docs/symbols/Kinetic.Text.php#setFontStyle

According to the documentation It supports 'normal', 'italic', or 'bold'. But what I do if I want to apply bold and Italic at once. Also I want to underline the text. How I can do in kinetic JS.

Isn't there anyone to tell me :'(

Answer 1

Like EliteOctagon already mentioned, KineticJS does not support underlining text yet. This is mainly due to the fact that text-decoration (including underlining) isn't supported in the html canvas element.

To add (multiple) font styles, is relatively easy. The most recommended way is by defining it at the initiation, like this:

var text = new Kinetic.Text({
    x: 0,
    y: 0,
    fontSize: 20,
    fontStyle: 'bold italic'
    fill: 'black',
});

If you need to set the font style differently at another time then initiation, you can use the method setFontStyle() like you mentioned. For instance like this:

var text = new Kinetic.Text();
text.setFontStyle('bold italic');