Skip to main content
TapLuke
TapLuke
Participant
February 15, 2017
Answered

Changing font size of dynamic text in HTML5 canvas

  • February 15, 2017
  • 1 reply
  • 6983 views

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

This topic has been closed for replies.
Correct answer ClayUUID

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

1 reply

C
ClayUUIDCorrect answer
Legend
February 15, 2017

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
TapLukeAuthor
Participant
February 15, 2017

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

C
ClayUUID
Legend
February 15, 2017

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").?


Good grief.

alert(this.txt_header.font);

Assign that back to font, changed as needed.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices