Jump to content
Search Community

Blurry Text from Animate CC Canvas

RayH test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Any ideas on improving quality of text in an HTML5 Canvas ad from Adobe Animate CC?

 

All text looks a bit fuzzy when publishing.

 

Google search mentioned 

 

stage.snapToPixelEnabled = True;

 

That helped a bit but our Campaign Managers are expecting a higher quality. There are tons of other scripts to scale the stage up and down which are actually mystifying to me. Not sure where to plug these methods into the .html and .js that Animate CC generates.

 

Thanks in advance for the amazing brains out there.

 

-Ray

Link to comment
Share on other sites

Hello RayH and Welcome to the GreenSock Forum!

 

If your scaling an image in your stage up in canvas, then the image will be blurry since it is a bitmap. In order to not have it blurry you should make the image be its largest size you scale up. So this way when it is scaled up, you will be scaling it up to its original size to prevent blurry rendering.

 

Also keep in mind that snapToPixelEnabled is part of EaselJS which is used in AnimateCC for canvas output.

 

http://www.createjs.com/docs/easeljs/classes/Stage.html#property_snapToPixelEnabled

 

Do you have an example of your code or can you provide more information?

 

Thanks :)

Link to comment
Share on other sites

Any ideas on improving quality of text in an HTML5 Canvas ad from Adobe Animate CC?

 

All text looks a bit fuzzy when publishing.

 

Google search mentioned 

 

stage.snapToPixelEnabled = True;

 

That helped a bit but our Campaign Managers are expecting a higher quality. There are tons of other scripts to scale the stage up and down which are actually mystifying to me. Not sure where to plug these methods into the .html and .js that Animate CC generates.

 

Thanks in advance for the amazing brains out there.

 

-Ray

I'm guessing you're on a retina display?

 

If so, if you're using an old version of Animate or an outdated publishing template, you might not be taking advantage of Animate's High DPI support which is now built it.

 

Can you upgrade to the latest version of Animate and try publishing from the newest default template?

Link to comment
Share on other sites

Jonathan and Ohem,

Thanks so much for your help.

We have Animate CC 2015.2 build 15.2.1.95

 

I will try the scaling method. Can I build the Animate document double size, then place in movie clip and scale? Or should I create SVG text and images at largest size and import?

 

I'm attaching the zip file with .js, .html and image.

 

We have Dell flat screen monitors at our workstations. Running everything from Lenovo T460s Laptop.

 

Follow up Question: Where would I insert the snapToPixelEnabled line? in .js or .html?

 

I'll do a little more home work on it today. Thanks for the quick response.

 

-Ray

 

 

blurryBannerTest_v01_628x162.zip

Link to comment
Share on other sites

You already have high DPI support enabled so building the banner at double size is unnecessary.

 

On my retina display, the text actually looks great.  

 

The text doesn't look quite as good on my non-retina display because it's small and thin, but I wouldn't say it's blurry.  You would have the same appearance with thin/SVG text on a non-retina display regardless of whether you use Animate or not.  

 

I would recommend using a bolder font weight for better legibility, and increasing the font size if possible.

  • Like 1
Link to comment
Share on other sites

RayH, You place that stage.snapToPixelEnabled = true; inside your HTML wrapper that is generated by Animate CC.

 

And all that snapToPixelEnabled does is make sure it doesn't use sub-pixel rendering. But snaps to whole pixels.

 

Also keep in mind that the canvas elements width and height can play a factor on how the text is rendered. Make sure to use actual width and height attributes for width and height. You can always set this via javascript if you want. There instances in some browsers where using CSS width and height only can affect the rendering resolution but not the actual pixels of the canvas. Sometimes you have to play with both width and height attributes (canvas.width and canvas.height) and also the CSS width and height which can affect resolution (canvas.style.width and canvas.style.height).

 

:)

Link to comment
Share on other sites

First, make sure the text is on whole pixel positional values and that the text isn't being scaled.

Then make sure you're dealing with Retina display correctly, like others have said.

And finally, if that doesn't work...
What I do sometimes (and it doesn't work with every font and isn't always the ideal situation), is to break the text apart and then expand the shape by 0.1 - 0.2 pixels or whatever (Select shape > Modify > Shape > Expand or something like that). Sometimes the edges of the text will sit on half-pixels, even if the text's position is on whole values or it's just slightly too thin, and this causes the text's shape to anti-aliase and be blurry. By expanding it, you get it closer to sitting on even pixels.

Now when you say 'fuzzy', this can also be caused by adding a filter or some type of effect that rasterizes the text. In this case, sometimes the trick is to actually sit it on half-pixels rather than whole pixels. (This trick also works with using hand-coding, SVG, or fonts/CSS and translate)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...