Skip to main content
TapLuke
Participant
February 15, 2017
Answered

Changing font size of dynamic text in HTML5 canvas

  • February 15, 2017
  • 1 reply
  • 6982 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

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

Legend
February 15, 2017

Because you aren't specifying a font.

Examine the value of font before changing it.