YouTipCanvas Stroketext
## HTML Canvas `strokeText()` Method
The `strokeText()` method of the Canvas 2D API renders the outlines of a given text at the specified coordinates. Unlike `fillText()`, which draws solid text, `strokeText()` only draws the stroke (border) of the characters, leaving the inside of the text transparent.
The default color of the text stroke is black. You can customize the appearance of the text using the `font` property to set the font family and size, and the `strokeStyle` property to apply colors, gradients, or patterns.
---
## Syntax
```javascript
context.strokeText(text, x, y, maxWidth);
```
### Parameter Values
| Parameter | Type | Description |
| :--- | :--- | :--- |
| `text` | *String* | The text string to render on the canvas. |
| `x` | *Number* | The x-coordinate of the starting point where the text should be drawn (relative to the canvas). |
| `y` | *Number* | The y-coordinate of the starting point where the text should be drawn (relative to the canvas). |
| `maxWidth` | *Number* (Optional) | The maximum allowed width of the text in pixels. If specified and the text is wider than this value, the font will be scaled down or condensed to fit. |
---
## Code Examples
### Example 1: Basic Stroke Text and Gradient Stroke Text
This example demonstrates how to draw a basic outlined text and a larger outlined text styled with a linear gradient.
#### HTML
```html
```
#### JavaScript
```javascript
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// 1. Draw simple stroke text
ctx.font = "20px Georgia";
ctx.strokeText("Hello World!", 10, 50);
// 2. Draw stroke text with a linear gradient
ctx.font = "30px Verdana";
// Create a linear gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Apply the gradient to the stroke style
ctx.strokeStyle = gradient;
ctx.strokeText("Big smile!", 10, 90);
```
---
## Styling and Alignment Properties
To customize the output of `strokeText()`, you can configure the following properties on the canvas 2D context before calling the method:
* **`font`**: Sets the current text style, size, and font family (e.g., `ctx.font = "bold 24px Arial"`).
* **`strokeStyle`**: Sets the color, gradient, or pattern used for the text outline (e.g., `ctx.strokeStyle = "blue"`).
* **`lineWidth`**: Sets the thickness of the text outline (e.g., `ctx.lineWidth = 2`).
* **`textAlign`**: Sets the text alignment relative to the `x` coordinate. Accepted values: `left`, `right`, `center`, `start`, `end`.
* **`textBaseline`**: Sets the vertical alignment relative to the `y` coordinate. Accepted values: `top`, `hanging`, `middle`, `alphabetic`, `ideographic`, `bottom`.
---
## Browser Support
| Feature | Chrome | Edge/IE | Firefox | Opera | Safari |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **`strokeText()`** | Yes | IE 9+ | Yes | Yes | Yes |
### Important Considerations
* **Legacy Browsers:** Internet Explorer 8 and earlier versions do not support the `