The fillRect function
The fillRect
function is used for drawing rectangles on your canvas
. As the name would suggest it does not stroke them (ie it doesn't draw the outline) - only
drawing the filled rectangle. An important thing to remember is that it's not a path function - so you don't have to call the
fill
function - when you call the fillRect
function it immediately draws a filled rectangle on your canvas
. It uses the fillStyle
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.fillStyle = 'red'; context.fillRect(x, y, width, height); } </script>