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: