HTML5 Canvas - Dynamic Text rendering issue

Engaged ,
Apr 06, 2022 Apr 06, 2022

Copy link to clipboard

Copied

Dynamic text is rendering in a different font to the static text fields, and the quality of rendering of the dynamic text is poor. 

 

Both static and dynamic text fields are using the same font and size.  All the text fields are using Franklin Gothic Medium Condensed 12 pt.  

 

How do I fix this?

 

2022-04-06_16-08-42.jpg

 

Also, is there an option for scrollable multiline text?

Views

61

Likes

Translate

Translate

Report

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
Adobe Community Professional ,
Apr 06, 2022 Apr 06, 2022

Copy link to clipboard

Copied

Hi.

 

Dynamic text fields should be clear and crispy. Make sure their parents are not being cached as or converted to bitmaps.

 

And there's no scrolling for canvas/CreateJS texts fields. You have to code it yourself or use components.

 

Regards,

JC

Likes

Translate

Translate

Report

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
Engaged ,
Apr 06, 2022 Apr 06, 2022

Copy link to clipboard

Copied

Thanks @JoãoCésar   But how do I check regarding caching of the parent MC or being converted to bitmaps?

 

Also, what components would have dynamic text and scolling similar to text areas?

Likes

Translate

Translate

Report

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
Engaged ,
Apr 06, 2022 Apr 06, 2022

Copy link to clipboard

Copied

Also, why are the fonts a different typeface for dynamic text fields from static ones.  In Animate, they show as the same font in the property inspector.

Likes

Translate

Translate

Report

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
Adobe Community Professional ,
Apr 06, 2022 Apr 06, 2022

Copy link to clipboard

Copied

LATEST

It depends if you're applying cache through code, if you're using color effects or filters in the IDE and on your publish settings.

 

About components, you could use the Label or TextInput components and some CSS. But probably it will be easier to create a text related component at runtime using document.createElement.

 

About fonts, you need to make sure that the font you're using will be available on all users devices. So web fonts are the best options. You can also apply the @font-face CSS rule.

Likes

Translate

Translate

Report

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