HTML <canvas> Tag with the strokeRect() Method
<canvas id="myCanvas" width="350" height="350"> <p>Fallback content for browsers that don't support the canvas tag.</p> </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Default stroke ctx.strokeRect (5, 5, 170, 120); // Orange stroke ctx.strokeStyle = "Orange"; ctx.strokeRect (5, 170, 170, 120); </script>
The above rectangles are drawn using the HTML
<canvas> element in conjunction with the
strokeRect() method accepts four parameters:
- Horizontal coordinates that the rectangle should start at. This is the number of pixels in from the left.
- Vertical coordinates that the rectangle should start at. This is the number of pixels in from the top.
- Width of the rectangle.
- Height of the rectangle.
strokeRect() method paints the given rectangle onto the canvas, using the current stroke style. The default color is
#000000 (black), so your rectangle will be black if a stroke style hasn't yet been specified.
In the above example, the first rectangle has a black stroke because this is the default color (and we didn't specify a
strokeStyle). The second rectangle has an orange stroke because we specified the color with
You can also use
fillStyle along with the
fillRect() method to fill a rectangle with a solid color or gradient.