JavaScript canvas2d object method: strokeRect()
[this page | pdf | back links]
The strokeRect() method of the JavaScript
DOM object
returned by the getContext("2d")
method applied to the HTML <canvas>
element draws a rectangle that is not ‘filled’ (i.e. it only draws the edge of
the rectangle). The default colour is black, but can be overridden using the strokeStyle
property.
It has the following
syntax with the following parameters.
context.strokeRect(x, y, width, height)
|
Parameter
|
Required / Optional
|
Description
|
|
x
|
Required
|
x-coordinate of
upper-left corner
|
|
y
|
Required
|
y-coordinate of
upper-left corner
|
|
width
|
Required
|
Width of rectangle, in
pixels
|
|
height
|
Required
|
Height of rectangle, 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.strokeRect(10, 10, 180, 80);
document.getElementById("element").appendChild(x2);
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedJavaScriptMethodCanvas2dStrokeRect() {
var x = document.createElement("CANVAS"); var c = x.getContext("2d"); return !!c.strokeRect;
} |
NAVIGATION LINKS
Contents | Prev | Next | JavaScript DOM (and BOM)