Draw a rectangle with stroke

Description

strokeRect(x, y, w, h) draws an unfilled rectangle

x and y are the offset from the top-left corner of the canvas element. The w and h arguments specify the width and height of the rectangle.

Example

The following code shows how to draw a rectangle with stroke.


<!DOCTYPE HTML>
<html>
<head>
<style>
canvas {<!--from   w ww.  j a v a 2s  . c o m-->
      border: thin solid black;
      margin: 4px
}
</style>
</head>
<body>
      <canvas id="canvas" width="500" height="500"> 
      Your browser doesn't support the <code>canvas</code> element 
      </canvas>
      <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            ctx.lineWidth = 2;
            ctx.strokeRect(30, 30, 50, 50);
            ctx.lineWidth = 4;
            ctx.strokeRect(70, 30, 50, 50);
            ctx.lineWidth = 6;
            ctx.strokeRect(130, 30, 50, 50);
            ctx.strokeRect(190, 30, 50, 50);
      </script>
</body>
</html>