Export (0) Print
Expand All

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:
© 2014 Microsoft