The fillRect() function
An example of 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>