The fillRect() function
Summary: The fillRect() function can be used to draw filled rectangles on to your canvas. Different to the path fill function this draws the rectangle immediately onto the canvas with no waiting (unlike the rect() path function). If you just want a quick rectangle - this may be the function for you.
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>