Renders the given text at the given (x, y) coordinates, ensuring that the text isn’t wider than maxWidth (if specified), using the current font, textAlign, and textBaseline values.
Method of apis/canvas/CanvasRenderingContext2Dapis/canvas/CanvasRenderingContext2D
Syntax context.strokeText(text, x, y, maxWidth);
The text characters to paint on the canvas.
xThe horizontal coordinate to start painting the text relative to the canvas.
yThe vertical coordinate of the baseline for the text to start painting, relative to the canvas.
maxWidth(Optional)
The maximum possible text width. If the value is less than width, the text is scaled to fit.
Return ValueNo return value
ExamplesShort example of drawing an outline text
ctx.strokeStyle = 'white';
ctx.strokeText("Hello World!", canvas.width/2, canvas.height/2, maxWidth);
Full example of drawing an outline text
<!DOCTYPE html>
<html>
<head>
<title>Canvas Example</title>
<script>
function draw() {
var canvas = document.getElementById("MyCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
var text = "Hello World!";
ctx.font = '3em Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'center';
ctx.fillStyle = 'none';
ctx.strokeStyle = 'white';
ctx.strokeText(text, canvas.width/2, canvas.height/2, canvas.width, canvas.height);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="MyCanvas" width="600" height="500">This browser or document mode doesn't support canvas</canvas>
</body>
</html>
Microsoft Developer Network: Windows Internet Explorer API reference Article
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4