Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
HTML5 Canvas Degree Symbol
The HTML5 Canvas API allows you to display special characters like the degree symbol (°) in text. You can use HTML entities or Unicode characters to render the degree symbol on canvas.
Using HTML Entity for Degree Symbol
The most common approach is using the HTML entity ° which renders as the degree symbol (°).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style media="screen">
body {
margin: 5em;
background: #eee;
text-align: center;
}
canvas {
background: #fff;
border: 2px solid #ccc;
display: block;
margin: 3em auto;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
var c = document.getElementsByTagName('canvas')[0];
c.width = c.height = 300;
var context = c.getContext('2d');
context.font = "20px sans-serif";
context.fillStyle = "black";
context.fillText("212° Fahrenheit", 80, 100);
context.fillText("100° Celsius", 90, 140);
context.fillText("360° Circle", 95, 180);
</script>
</body>
</html>
Canvas displays: 212° Fahrenheit 100° Celsius 360° Circle
Using Unicode Character
You can also use the Unicode character directly in JavaScript strings:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
canvas {
border: 1px solid #ccc;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<canvas width="400" height="200"></canvas>
<script>
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
ctx.font = "24px Arial";
ctx.fillStyle = "blue";
// Using Unicode escape sequence
ctx.fillText("Temperature: 75\u00B0F", 50, 50);
// Using direct Unicode character
ctx.fillText("Angle: 45° degrees", 50, 100);
// Using String.fromCharCode()
ctx.fillText("Rotation: 90" + String.fromCharCode(176) + " clockwise", 50, 150);
</script>
</body>
</html>
Canvas displays: Temperature: 75°F Angle: 45° degrees Rotation: 90° clockwise
Methods Comparison
| Method | Code Example | Use Case |
|---|---|---|
| HTML Entity | "212° F" |
When writing in HTML directly |
| Unicode Escape | "75\u00B0F" |
JavaScript strings |
| Direct Character | "45° degrees" |
When UTF-8 encoding is set |
| fromCharCode() | String.fromCharCode(176) |
Dynamic character generation |
Key Points
- Ensure your HTML document has
<meta charset="utf-8">for proper Unicode support - The Unicode code point for the degree symbol is U+00B0
- Canvas text rendering supports all standard Unicode characters
- Use appropriate font sizes to ensure the degree symbol is visible
Conclusion
HTML5 Canvas supports multiple ways to display the degree symbol. The most straightforward approach is using the degree character directly in your JavaScript strings when UTF-8 encoding is properly set.
Updated on: 2026-03-15T23:18:59+05:30
518 Views
Advertisements