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
How to draw large font on HTML5 Canvas?
To draw large font text on HTML5 Canvas, you need to set the font size using the font property and use fillText() or strokeText() methods to render the text.
Basic Syntax
context.font = "size family"; context.fillText(text, x, y); context.strokeText(text, x, y);
Example: Drawing Large Text
<!DOCTYPE html>
<html>
<head>
<title>Large Font Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="400" style="border:1px solid #000;"></canvas>
<script>
var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d");
// Set large font
context.font = '180pt Georgia';
context.strokeStyle = "#FF0000";
context.fillStyle = "#0066CC";
context.lineWidth = 8;
// Draw filled text
context.fillText("Demo!", 50, 200);
// Draw outlined text
context.strokeText("Demo!", 50, 200);
</script>
</body>
</html>
Key Properties
- font: Sets font size and family (e.g., "180pt Georgia")
- fillStyle: Color for filled text
- strokeStyle: Color for text outline
- lineWidth: Thickness of text outline
Multiple Font Sizes Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple Font Sizes</title>
</head>
<body>
<canvas id="fontCanvas" width="800" height="500" style="border:1px solid #000;"></canvas>
<script>
var canvas = document.getElementById("fontCanvas");
var ctx = canvas.getContext("2d");
// Large font
ctx.font = "120pt Arial";
ctx.fillStyle = "#FF6600";
ctx.fillText("BIG", 50, 150);
// Medium font
ctx.font = "60pt Arial";
ctx.fillStyle = "#0066CC";
ctx.fillText("Medium", 50, 250);
// Small font for comparison
ctx.font = "24pt Arial";
ctx.fillStyle = "#333333";
ctx.fillText("Small text for comparison", 50, 300);
</script>
</body>
</html>
Common Font Size Units
| Unit | Example | Description |
|---|---|---|
| pt (points) | "72pt Arial" | Most common, 1pt ? 1.33px |
| px (pixels) | "96px Arial" | Direct pixel size |
| em | "6em Arial" | Relative to default size |
Tips for Large Fonts
- Use appropriate canvas dimensions to accommodate large text
- Adjust
lineWidthproportionally for stroke text - Consider text positioning - large fonts may extend beyond canvas bounds
- Test different font families for readability at large sizes
Conclusion
Drawing large fonts on HTML5 Canvas requires setting the font property with appropriate size units and using fillText() or strokeText() methods. Ensure your canvas dimensions accommodate the large text size.
Updated on: 2026-03-15T23:18:59+05:30
298 Views
Advertisements