HTML5 Canvas Reference - strokeRect()

strokeRect(x,y,width,height) draws a rectangular outline at position x,y for width and height.

strokeRect method makes use of the current strokeStyle, lineWidth, lineJoin, and miterLimit settings.

The default color of the stroke is black.

We can use the strokeStyle property to set a color, gradient, or pattern to style the stroke.

Browser compatibility


`strokeRect()`	Yes	Yes	Yes	Yes	Yes

JavaScript syntax

context.strokeRect(x,y,width,height);

Parameter Values

Parameter	Description
x	The x-coordinate of the upper-left corner
y	The y-coordinate of the upper-left corner
width	The width in pixels
height	The height in pixels

Example

The following code uses strokeRect method to draw a rectangle.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width='500px' height='200px'/>
<script type='text/javascript'>
    var context = document.getElementById("canvas").getContext("2d");
<!--   w  ww  .  j  av  a 2s.c  o  m-->
    context.strokeRect(5, 5, 100, 100);

</script>
</body>
</html>

The code above is rendered as follows: