strokeRect

Summary

Takes the result of tracing the path, using the CanvasRenderingContext2D object’s line styles, and fills it with the strokeStyle.

Method of apis/canvas/CanvasRenderingContext2D apis/canvas/CanvasRenderingContext2D

Syntax

var object = object.strokeRect(x, y, w, h);

Parameters

x

Data-type: Number

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

y

Data-type: Number

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

w

Data-type: Number

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

h

Data-type: Number

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

Return Value

Returns an object of type DOM NodeDOM Node

Type: HRESULT

If this method succeeds, it returns S_OK. Otherwise, it returns an HRESULT error code.

Examples

Basic example drawing a 100 x 100 px rect with a red outline

// draw rect with red outline
ctx.strokeStyle = 'red';
ctx.strokeRect(10,10,100,100);

Draws a rect with a white outline onto a black canvas

<!DOCTYPE html>
<html>
<head>
  <title>Canvas Example</title>
  <script>
    function draw() {
      var canvas = document.getElementById("MyCanvas");
      if (canvas.getContext) {  // check for support
        var ctx = canvas.getContext("2d");

        // clear background
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        // draw rect with outline
        ctx.strokeStyle = 'white';
        ctx.strokeRect(10,10,100,100);

      }
    }
  </script>
</head>
<body onload="draw();">
  <canvas id="MyCanvas" width="600" height="500">This browser or document mode doesn't support canvas</canvas>
</body>
</html>

Notes

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.

Related specifications

W3C HTML Canvas 2D Specification: W3C Candidate Recommendation

Attributions

Microsoft Developer Network: Windows Internet Explorer API reference Article