Home/ Questions/Q 3721874
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T05:42:18+00:00

I don’t know why but I’m unable to use a degree symbol (°) with

  • 0

I don’t know why but I’m unable to use a “degree” symbol (°) with fillText. I tried everything: ALT+248, ALT+0176, °, copy/paste from web… All I get is nothing or °. Works fine in code or on the same page in HTML – just not in canvas.

Anyone know how to fix this? Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This works for me, using a literal Unicode character in the text. See an example here:
    http://jsfiddle.net/W5d7D/

    Is your source file:

    1. saved as UTF-8, and
    2. described as using a Unicode character set, and
    3. describing the JavaScript source as using a Unicode character set?

    Here’s a standalone example showing Unicode working in HTML and on Canvas. You can see this online at http://phrogz.net/tmp/canvas_unicode_degree_symbol.html

    <!DOCTYPE html>
<html><head>
  <meta charset="utf-8">
  <title>Unicode Degree Symbol on HTML5 Canvas</title>
  <style type="text/css" media="screen">
    body { margin:4em; background:#eee; text-align:center }
    canvas { background:#fff; border:1px solid #ccc; display:block; margin:2em auto }
  </style>
</head><body>
  <canvas></canvas>
  <p>Unicode characters 'just work' with a proper setup, e.g. "212° Fahrenheit"</p>
  <script type="text/javascript" charset="utf-8">
    var c = document.getElementsByTagName('canvas')[0];
    c.width = c.height = 400;

    var ctx = c.getContext('2d');
    ctx.font = "bold 24px sans-serif";
    ctx.fillText("212° Fahrenheit", 100, 100);
  </script>
</body></html>
    • 0