<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.
The strokeRect()
method accepts four parameters: strokeRect(x,y,w,h)
.
x
y
w
h
The 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 strokeStyle
.
You can also use fillStyle
along with the fillRect()
method to fill a rectangle with a solid color or gradient.