Poor Anti-Aliasing of Text Drawn on Canvas

Subpixel anti-aliased text on HTML5's canvas element

It's now possible to get sub-pixel font rendering by creating an opaque canvas context. In Safari and Chrome you can get this using this snippet:

var ctx = canvas.getContext("2d", {alpha: false})

I found this from this blog post.

Bad text look on Canvas

set the antialiasing flag to your Paint object. The flag is ANTI_ALIAS_FLAG

TextPaint paint = new TextPaint(TextPaint.ANTI_ALIAS_FLAG);

HTML5 Canvas and Anti-aliasing

Anti-aliasing cannot be turned on or off, and is controlled by the browser.

Can I turn off antialiasing on an HTML <canvas> element?

anti-aliased large text in canvas

The short answer is that you cannot control anti-aliasing.

The good news is that it looks much better in Chrome 27.0.1453.12 dev-m:

Unfortunately you'll either have to "just wait", or else use images instead of fillText.

The text part of the Canvas spec was implemented last in most browsers, and it shows.

Can I draw with antialiasing on canvas?

Drawing operations want Paint. In this Paint you set Paint.setFlags(Paint.ANTI_ALIAS_FLAG)

---

Related Topics