Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Changing font size of dynamic text in HTML5 canvas

Community Beginner ,
Feb 15, 2017 Feb 15, 2017

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

6.8K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Feb 15, 2017 Feb 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

Translate
LEGEND ,
Feb 15, 2017 Feb 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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 15, 2017 Feb 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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 15, 2017 Feb 15, 2017

Because you aren't specifying a font.

Examine the value of font before changing it.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 15, 2017 Feb 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").?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 15, 2017 Feb 15, 2017

Good grief.

alert(this.txt_header.font);

Assign that back to font, changed as needed.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 15, 2017 Feb 15, 2017
LATEST

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines