Canvas Text

Posted in Canvas Tutorial

Updated on May 19, 2024

By Mari Selvan

👁️ 78 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The HTML5 <canvas> element provides an exciting way to draw graphics using JavaScript. Among its many capabilities, rendering text is a crucial feature for creating dynamic and interactive web graphics. This guide will cover how to use the canvas API to draw and style text.

💡 Syntax

To draw text on a canvas, you use the fillText() or strokeText() methods of the canvas 2D context. The basic syntax for these methods is as follows:

Syntax

Copied

context.fillText(text, x, y);
context.strokeText(text, x, y);

🧰 Attributes

text: The string of text you want to render.
x: The x-coordinate where the text will start.
y: The y-coordinate where the text will start.
font (optional): Specifies the font style for the text (e.g., context.font = "20px Arial";).
textAlign (optional): Specifies the text alignment (e.g., context.textAlign = "center";).
textBaseline (optional): Specifies the baseline alignment (e.g., context.textBaseline = "top";).
fillStyle and strokeStyle (optional): Specifies the color of the filled or stroked text.

📄 Example

Here’s an example demonstrating how to draw and style text on a canvas:

index.html

Copied

<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");

  // Set font properties
  context.font = "30px Arial";
  context.textAlign = "center";
  context.textBaseline = "middle";
  context.fillStyle = "blue";
  context.strokeStyle = "black";

  // Draw filled text
  context.fillText("Hello, Canvas!", canvas.width / 2, canvas.height / 2);

  // Draw stroked text
  context.strokeText("Hello, Canvas!", canvas.width / 2, canvas.height / 2 + 50);
</script>

🧠 How it works?

In this example, we create a canvas element and use JavaScript to draw text with specific styling. The text "Hello, Canvas!" is drawn twice, once filled in blue and once outlined in black, both centered in the canvas.

🎉 Conclusion

Using the canvas API to render text opens up a wide range of possibilities for web developers. Whether you're creating simple labels or complex graphical text effects, the canvas provides the tools you need.

Understanding the syntax and attributes for drawing text will help you make the most of this powerful feature in your web applications.