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?
\$\begingroup\$
\$\endgroup\$
6
-
2\$\begingroup\$ How are you drawing your text so far? \$\endgroup\$– DMGregory ♦Commented Jun 3, 2020 at 14:41
-
\$\begingroup\$ Have you considered to just use a pixely font? \$\endgroup\$– PhilippCommented 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\$– mushrombrother.jpgCommented 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\$– mushrombrother.jpgCommented 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\$– mushrombrother.jpgCommented Jun 4, 2020 at 15:40
|
Show 1 more comment
1 Answer
\$\begingroup\$
\$\endgroup\$
In the css, you need to disable font smoothing for canvas:
canvas{
font-smooth: never;
-webkit-font-smoothing : none;
}