7
\$\begingroup\$

I'm making a game with a canvas scaled up such that each pixel is pretty big. I want to display some pixelated text without anti-aliasing but I have idea how I would accomplish this.

Is there I way can do such a thing?

Example

\$\endgroup\$
6
  • 2
    \$\begingroup\$ How are you drawing your text so far? \$\endgroup\$
    – DMGregory
    Jun 3, 2020 at 14:41
  • \$\begingroup\$ Have you considered to just use a pixely font? \$\endgroup\$
    – Philipp
    Jun 3, 2020 at 19:54
  • \$\begingroup\$ I'm using ctx.fillText(), and ctx.font to style it. I would use a custom font but I don't know how to draw custom fonts into the canvas. \$\endgroup\$ Jun 4, 2020 at 14:55
  • \$\begingroup\$ Update: I've figured out how to import a custom font and draw it to the canvas, but there is still an anti-aliasing effect. \$\endgroup\$ Jun 4, 2020 at 15:25
  • \$\begingroup\$ I've found the solution! you need to disable font smoothing for all elements in the css. \$\endgroup\$ Jun 4, 2020 at 15:40

1 Answer 1

7
\$\begingroup\$

In the css, you need to disable font smoothing for canvas:

canvas{
    font-smooth: never;
    -webkit-font-smoothing : none;
}
\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .