HTML Reference Manual

HTML tag大全

HTML canvas strokeRect() method

strokeRect() is a Canvas 2D API in canvas, a method to draw a rectangle with a starting point at (x, y), width w, and height h using the current drawing style. This method draws directly to the canvas without modifying the current path, so any subsequent fill() or stroke() calls have no effect on it.

HTML canvas Reference Manual

Online Example

Draw 100*100 pixel square:

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas strokeRect() method usage (Basic Tutorial Website oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3">
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2);
ctx.strokeRect(20,20,100,100);
</script>
</body>
</html>

Test See ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9and Firefox, Opera, Chrome, and Safari support strokeRect() Method.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and Usage

The strokeRect() method draws a rectangle (without filling). The default stroke color is black.

Tip:Use strokeStyle Property to set the stroke color, gradient, or pattern.

JavaScript Syntax:	context.strokeRect(x,y,width,height);

Parameter Value

Parameter	Description
x	The x coordinate of the top-left corner of the rectangle.
y	The y coordinate of the top-left corner of the rectangle.
width	The width of the rectangle, in pixels.
height	The height of the rectangle, in pixels.

HTML canvas Reference Manual

HTML: <template> tag