1

I'm building a banner generation tool to automate our workflow. But I found a problem when rendering fonts(I'll add some screenshot later).

If we use exactly the same font and font-weight, and I'm using a mac so it's a retina screen:

  1. If I look at the text in the design app(no matter it's made in Photoshop, Sketch, or Figma which is a webgl-based design tool), it looks quite sharp (smooth), which is ideal.

  2. If I use html/css to render the font, then the font looks much thicker than in design apps. It makes my text look much busier as Chinese character itself is visually more complicated than English characters. But if I use -webkit-font-smoothing: antialiased, then the rendering of the text is almost the same as design apps, it's quite good as well.

  3. However, I have to use canvas for my tool, as some effects from design apps are poorly supported by html/css, then I found that, it seems the text rendering in canvas is also very thick. And, I haven't found any way like -webkit-font-smoothing: antialiased to completely fix it. The only improvement I could do, is to scale the canvas into something like 3x or even 4x. I indeed found when the canvas scaled to 4x larger, the font becomes thinner, but it's still very far away from the effect of -webkit-font-smoothing: antialiased.

Is there any way could make the canvas text rendering result same as -webkit-font-smoothing: antialiased in html/css??

Xiangyu Du
  • 11
  • 1
  • While I can think of a few reasons, the very first question you should be able to answer is "if you need to draw text, why are you using a canvas element for that?" - e.g. why can you not draw that text as a `
    ` or ``, placed over the canvas in the appropriate location, with a clipping parent that ensures overflow gets hidden?
     – Mike 'Pomax' Kamermans Dec 10 '19 at 23:31
  • Hey Pomax, thanks for your comment, let me explain. So I'm creating a banner generation tool. So, stuff like text, masks, shapes, arcs, background and gradients will definitely be a part of the banner. As it's a tool, we cannot pre-assume that designers will always put text above everything, that's why I decided to set text as a part of the canvas instead of an html element overlay. – Xiangyu Du Dec 11 '19 at 02:26
  • yep, that's fair. Due to how differently the canvas renders things (it cannot rely on OS level rendering at native dpi, it has to "draw" things onto a (sub)pixel grid) you're not going to get identical rendering between the two systems, so I'd recommend first playing with pixel offsets: integer canvas coordinates are _between_ screen pixels, so try offsetting your values by (0.5, 0.5) and see if that helps a little. – Mike 'Pomax' Kamermans Dec 11 '19 at 15:53

0 Answers0