Changing font size of dynamic text in HTML5 canvas

[TapLuke]

Hi everyone,

how do you dynamically change the text size of the dynamic text, back in the AS days there was TextFormat() and TextField.setTextFormat() to call the text size that you defined.

How would you go about doing it in for HTML5 with JS for Animate CC?

I would also be happy if anyone would know how you can access the font size, for example there are

this.mytext.text to access the content

this.mytext.lineHeight to access the line height

Is there a way to get a hold of the font size? I tried

this.mytext.fontSize

this.mytext.size

But they all did not work.

I hope anyone can help,

Thanks.

edited

[ClayUUID · Accepted solution]

You could always just change the scale of the font object. But if you want to change the text style properly, that's what the font property is for.

EaselJS v0.8.2 API Documentation : Text

This corresponds directly to the HTML5 canvas font property.

CanvasRenderingContext2D.font - Web APIs | MDN

[TapLuke]

Thanks Clay, you are my hero once again.

So I added the property to my element like this:

this.txt_header.font = "40px";

But now the text is really tiny, no matter what size I enter there. Seems it shows the standard size of 10px. Do you know why or what I am doing wrong?

Thanks

[ClayUUID]

Because you aren't specifying a font.

Examine the value of font before changing it.

[TapLuke]

Sorry, I do not quite get it.

Do you mean that I have to change the values as they are being used by Animate CC in my case like font name, size and font weight? Or that I have to set it up using the values as specified in the createJS and MDN doc which says: The font style to use. Any valid value for the CSS font attribute is acceptable (ex. "bold 36px Arial").?

[ClayUUID]

Good grief.

alert(this.txt_header.font);

Assign that back to font, changed as needed.

[TapLuke]

Ha, sorry. Got it now and it works. Thanks once more.