Skip to main content
A
Anonymous
May 10, 2019
Answered

Font in HTML5 Canvas/JS is bolder/softer, compared to sharper/thinner in AS3/SWF?

  • May 10, 2019
  • 4 replies
  • 1271 views

Is there a way to achieve the same quality (sharp, thinner) look of a SWF font display within the HTML5 Canvas environment?

I have this old site that currently uses SWF for some minor text animations (screenshot 1 below) that I’ve been attempting to recreate using HTMl5 with Animate (screenshot 2 below).

After finally figuring out how to implement the JS/HTML5 into my old site’s html, I’m now at a lost as to how to achieve the same look as my original SWF display involving mostly text.

Should note also, when in HTML Canvas the web font option and the embed font option are greyed out in the properties panel (presumably that’s the way it’s supposed to be).

Any help is appreciated.

Thanks.

1. AS3/SWF in chrome browser.

2. HTML5 canvas/JS in chrome browser.

This topic has been closed for replies.
Correct answer GoryGreg

Hi,

you could use dynamic text for crisper fonts (i.e. use Web Fonts- though some fonts show better than others and at different sizes). Use either from Adobe or Google Web Fonts which get embedded once you find the font (click on the 'World' icon to the right of the Family drop down in the Character part to search). Once you add a font then these Web Fonts can then be found listed at the top of your Family drop down menu. Though the font family you have used may not be among their lists.

Another idea is to put your text on a rounded up/down pixel position in Properties eg. if your text box is positioned x = 5.2 and the y = 7.8 then round up/down to x = 5 and y = 8.

Hope this helps in someway.

Cheers

Greg

4 replies

A
Anonymous
May 10, 2019

I ended up using dynamic text, then Break Apart, followed by moving each letter individually to achieve the desired spacing.

This would be tedious if I had text heavy Animate projects.

Next time I encounter something like this, exploring creating text via other apps may be a solve, like InDesign, and exporting as a PDF or EPS, or whatever Animate is compatible with.

In all, each suggestion helped me to better understand Animate and HTML5’s capabilities and limitations a lot clearer.

Thanks all.

C
ClayUUID
Legend
May 10, 2019

Welcome back to the world of dealing with browser differences. How text is rendered to canvas is entirely under the control of the browser. If you want pixel-perfect rendering, you'll have to turn your text into bitmaps.

N
Community Expert
Nick GioiaCommunity Expert
Community Expert
May 10, 2019

See if this helps.

Work with classic text in Animate CC

G
GoryGregCorrect answer
Inspiring
May 10, 2019

Hi,

you could use dynamic text for crisper fonts (i.e. use Web Fonts- though some fonts show better than others and at different sizes). Use either from Adobe or Google Web Fonts which get embedded once you find the font (click on the 'World' icon to the right of the Family drop down in the Character part to search). Once you add a font then these Web Fonts can then be found listed at the top of your Family drop down menu. Though the font family you have used may not be among their lists.

Another idea is to put your text on a rounded up/down pixel position in Properties eg. if your text box is positioned x = 5.2 and the y = 7.8 then round up/down to x = 5 and y = 8.

Hope this helps in someway.

Cheers

Greg

A
Anonymous
May 10, 2019

Making it dynamic text was definitely a big help. It looks closer to what it was originally now. But notice the spacing is tighter, and it’s still not as sharp and crisp as the original, but at this point I’ll take this over what it was previously. We’re definitely moving forward, but not quite out of the woods yet.

But yeah, back to the spacing, notice that kerning and tracking are greyed out now?

There’s no way for me to adjust the spacing?

Why is this so madenning, when I’m just working with text?

I just don’t get it.

Original SWF live in Chrome.

HTML5/JS in Chrome.

Letter spacing and auto kern are greyed out/inoperable.

C
ClayUUID
Legend
May 10, 2019

https://forums.adobe.com/people/neal+derekl34934377  wrote

I just don’t get it.

Canvas documents use the canvas text-drawing API to draw text. The canvas text-drawing API doesn't support configurable letter spacing.

There, now you get it.

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