Greek Letters in HTML5 Canvas

Question

Is there a way to print Greek letters on an HTML5 canvas? I've tried using the html entity name and number, like this

canvas2.cx.fillText("&xi;", 50, 50);

and

canvas2.cx.fillText("&#958;", 50, 50);

but it just prints it out literally because the canvas does not know to interpret these symbols.

possible duplicate of [HTML5 Canvas: Degree Symbol](http://stackoverflow.com/questions/4671841/html5-canvas-degree-symbol) — Phrogz, May 25 '12 at 03:03

score 12 · Accepted Answer · answered May 24 '12 at 20:53

12

Simply use UTF-8.

You don't have to escape chars to write them in HTML or Canvas.

Use the correct header in your document :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF8">

answered May 24 '12 at 20:53

Denys Séguret

372,613
87
782
758

1

For HTML5 you can simply write [``](http://stackoverflow.com/questions/4696499/which-one-to-use-meta-charset-utf-8-vs-meta-http-equiv-content-type). – Phrogz May 25 '12 at 03:04
@Phrogz Thanks, I didn't knew that (I checked the norm, you're right). – Denys Séguret May 25 '12 at 05:50

score 8 · Answer 2 · answered May 24 '12 at 20:55

8

If you want to restrict your JavaScript source to ASCII, but still include non-ASCII characters in a string, you can use a Unicode escape sequence: (small xi's codepoint is U+03BE):

canvas2.cx.fillText("\u03be", 50, 50);

answered May 24 '12 at 20:55

John Flatness

32,469
5
79
81

score 1 · Answer 3 · answered May 24 '12 at 20:53

1

Like α and β? If you're using UTF-8, you may be able to just type the character literals. example:

canvas2.cx.fillText("α", 50, 50);

answered May 24 '12 at 20:53

Rob Lowe

827
6
10

Greek Letters in HTML5 Canvas

3 Answers3