0

So, I'm having trouble finding out how to fix the edginess of the text rendered with fillText function. The text looks fine if it is rendered with the DOM instead of the canvas however I need to render it using the canvas instead.

Edit: I found out what's wrong with the way I render the text. It was all about the animation loop as I didn't clear the canvas before re-rendering the text. So when I render the text once, it looks fine (text on top is rendered with DOM, bottom text rendered with canvas). But when I put it in an animation loop it becomes messed up (same kind of image but canvas text looks bad).

  • 2
    Welcome to Stack Overflow! Please take the [tour](https://stackoverflow.com/tour) and read about how to create a [minimal, complete, and verifiable example](https://stackoverflow.com/help/mcve). It will make things easier for those trying to help you and increase your chances of quickly getting a solution to your problem. (Because otherwise, we'd have to create one ourselves first to fiddle around with, and that's quite time-consuming...) – Constantin Groß Nov 02 '19 at 08:49
  • 1
    Also, this could be a duplicate of [this question](https://stackoverflow.com/questions/5262174/poor-anti-aliasing-of-text-drawn-on-canvas/26154753) – Constantin Groß Nov 02 '19 at 08:51
  • Wow how come you don't have **any** antialiasing? Are you using some `image-rendering` css rule or a `filter`? Just remove it if so, text is naturally antialiased on canvas (using transparency antialiasing by default and ways to force subpixel on some configs). – Kaiido Nov 02 '19 at 09:10

0 Answers0