Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
strokeRect

strokeRect method

Creates an outline of the specified rectangle on a canvas by using the current stroke, line width, and join styles.

HTML Canvas 2D Context, Section 8Internet Explorer 9

 

Syntax

CanvasRenderingContext2D.strokeRect(x, y, w, h);

Parameters

x [in]

Type: number

The x-coordinate, in pixels, of the upper-left corner of the rectangle in relation to the coordinates of the canvas.

y [in]

Type: number

The y-coordinate, in pixels, of the upper-left corner of the rectangle in relation to the coordinates of the canvas.

w [in]

Type: number

The width, in pixels, of the rectangle in relation to the coordinates of the canvas.

h [in]

Type: number

The height, in pixels, of the rectangle in relation to the coordinates of the canvas.

Return value

This method does not return a value.

Standards information

Remarks

The strokeRect method creates a path that requires the use of the stroke method to render the rectangle. The outline uses the current strokeStyle, lineWidth, lineJoin, and, when appropriate, miterLimit properties. If the w or h parameter is zero, a line is drawn. If the w and h parameters are zero, the rectangle is not drawn.

Examples

The following code example draws rectangles by using strokeStyle, lineJoin, and lineWidth for different effects.


 <html>
<head>
  <title>StrokeRect example</title>
  <script type="text/javascript">
      function draw() {
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              ctx.lineWidth = "3";
              ctx.strokeStyle = "blue";
              ctx.strokeRect(5, 5, 300, 250);
              ctx.lineWidth = "5";
              ctx.strokeStyle = "red";
              ctx.strokeRect(150, 200, 300, 150);
              ctx.lineJoin = "round";
              ctx.lineWidth = "10";
              ctx.lineWidth = "7";
              ctx.strokeStyle = "green";
              ctx.strokeRect(250, 50, 150, 250);
          }
      }
  </script>
</head>
<body onload="draw();">
  <canvas id="MyCanvas" width="600" height="600">This browser or document mode doesn't support canvas</canvas> 
</body>
</html>


See also

CanvasRenderingContext2D

 

 

Show:
© 2015 Microsoft