HTML Canvas - strokeRect() Method

The HTML Canvas strokeRect() method of Canvas 2D API can be used to stroke a rectangle with the data provided using the parameters.

It is available in the CanvasRenderingContext2D interface and strokes to the given area of Canvas element completely black when no color input is given.

We can give color input using strokeStyle property for the context object before drawing the rectangle. It should be clearly defined to avoid any errors resulting in not working of the method.

When this method is called, the co-ordinates passed is taken as the top left co-ordinates of the rectangle area which is stroked using the given input or black by default.

Syntax

Following is the syntax of HTML Canvas strokeRect() method −

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

Parameters

Following is the list of parameters of this method −

S.No	Parameter & Description
1	x The x co-ordinate value of the starting point of the rectangle.
2	y The y co-ordinate value of the starting point of the rectangle
3	width The width of the drawing rectangle.
4	height The height of the drawing rectangle.

Return values

When the method is called, a rectangle is stroked based on the parameters passed with the method.

Example

The following code creates a stroked rectangle with default color style using the HTML Canvas strokeRect() method.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="Context();">
      <canvas id="canvas" width="350" height="250" style="border: 1px solid black;"></canvas>
      <script>
         function Context() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.strokeRect(50, 50, 200, 150);
         }
      </script>
   </body>
</html>

Output

The output returned by the above code in web page as −

Example

The following example adds strokes to the rectangle using color value specified by the strokeStyle property given for the context object.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="Context();">
      <canvas id="canvas" width="350" height="250" style="border: 1px solid black;"></canvas>
      <script>
         function Context() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.strokeStyle = 'green';
            context.lineWidth = 3;
            context.strokeRect(50, 50, 200, 150);
         }
      </script>
   </body>
</html>

Output

The output returned by the above code in web page as −

Example

The following example adds strokes to the rectangle using color value specified by the strokeStyle property and uses other 'line' properties to draw a designed rectangle by the context object.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="Context();">
      <canvas id="canvas" width="350" height="250" style="border: 1px solid black;"></canvas>
      <script>
         function Context() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.strokeStyle = 'purple';
            context.lineWidth = 10;
            context.shadowColor = 'orange';
            context.shadowBlur = 15;
            context.strokeRect(25, 25, 250, 200)
         }
      </script>
   </body>undefined
</html>

Output

The output returned by the above code in web page as −

html_canvas_rectangles.htm