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-axis
coordinate - The
y-axis
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>