This test file

• Is saved with UTF-8 encoding
• Uses Degree_Symbol_ANSI_hex.js and Degree_Symbol_UTF8_hex.js

In all the other test files, text is placed on a canvas using javascript code similar to the following.

context.fillText("25°C", 100, 100);

context.fillText("\xB05°C", 100, 100);

Like all the other test files (html and javascript), viewing the above text in notepad shows the Degree Symbol as (°).

It turns out that there are 2 different ways for a text file to store the degree symbol

• As a regular ASCII character (ANSI in the Encoding option when saving a file)
• As a UTF-8 character (Another Encoding option)

The hex code works the same with all the combinations I tested, but is not as obvious in the text editor (notepad).

The following table encapsulates the testcases and is similar to the one used in the 4 main testcases - UTF8 ANSI ANSI with Chrome Failure ANSI with meta tag

• There are 3 canvases - each written to by javascript in a different file
  • Local HTML - Uses javascript in the current html file
  • ANSI hex_js - Uses Degree_Symbol_ANSI_hex.js
  • UTF-8 hex_js - Uses Degree_Symbol_UTF8_hex.js
• A code sample - Besides the text file encoding, all 3 javascript routines are identical except for
  • The function name
  • The id of the canvas object

Testcases using the associated code
Canvases			Sample code
Local HTML	ANSI hex_js	UTF-8 hex_js
			<script> var canvas = document.getElementById("testCanvas"); var context = canvas.getContext("2d"); // clear canvas context.clearRect(0, 0, canvas.width, canvas.height); context.font="30px sans-serif"; context.fillText("\xB05°C", 10, 40); </script>

In this ANSI html file, when that code executes both Degree Symbols are placed on all the canvases and rendered as small superscript circles.

URL: http:// mc-computing.com / Languages / Javascript / Degree_Symbol / Degree_Symbol_ANSI_hex.html