The strokeRect() function
Summary: The strokeRect() function can be used to draw rectangular outlines on to your canvas
An example of the
strokeRect()
function
The strokeRect()
function is used for drawing rectangles on your
canvas. As the name would suggest it does not fill them - only
drawing the outline. An important thing to remember is that this is not a Path
function - so you don't have to call the stroke()
function - when you call the strokeRect()
function it immediately
draws a rectangle on your canvas. It uses the strokeStyle
setting for the color to use.
Arguments to the function
- The X coordinate
- The Y coordinate
- The width of the rectangle
- The height of the rectangle
An example
<script> window.onload = function () { var canvas = document.getElementById("cvs"); var context = canvas.getContext('2d'); var x = 50; var y = 50; var width = 100; var height = 100; context.strokeStyle = 'red'; context.strokeRect(x, y, width, height); } </script>