JavaScript canvas2d object method: strokeText()
[this page | pdf | back links]
The strokeText() method of the JavaScript
DOM object
returned by the getContext("2d")
method applied to the HTML <canvas>
element draws text that is not ‘filled’ (i.e. it only draws the edges of the
characters). The default colour is black, but can be overridden using the strokeStyle
property.
It has the following
syntax with the following parameters.
context.strokeText(text, x, y, maxwidth)
|
Parameter
|
Required / Optional
|
Description
|
|
text
|
Required
|
String specifying text
|
|
x
|
Required
|
x-coordinate of
upper-left corner (relative to canvas)
|
|
y
|
Required
|
y-coordinate of
upper-left corner (relative to canvas)
|
|
maxwidth
|
Optional
|
Maximum width, in
pixels
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
<span id="element"></span>
<script>
var x2 = document.createElement("CANVAS");
x2.setAttribute("width", "200");
x2.setAttribute("height", "100");
x2.setAttribute("style", "border: 1px solid black");
var c2 = x2.getContext("2d");
c2.strokeStyle = "blue";
c2.font = "40px Verdana";
c2.strokeText("Hello",10,50);
document.getElementById("element").appendChild(x2);
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedJavaScriptMethodCanvas2dStrokeText() {
var x = document.createElement("CANVAS"); var c = x.getContext("2d"); return !!c.strokeText;
} |
NAVIGATION LINKS
Contents | Prev | Next | JavaScript DOM (and BOM)