fillRect method
Paints a rectangle onto a CanvasRenderingContext2D object by using the current ICanvasRenderingContext2D::fillStyle.
![]() ![]() |
Syntax
object.fillRect(x, y, w, h);
Parameters
- x [in]
-
Type: number
The x-coordinate, in pixels, of the upper-left corner of the rectangle in relation to the coordinates of the canvas.
- y [in]
-
Type: number
The y-coordinate, in pixels, of the upper-left corner of the rectangle in relation to the coordinates of the canvas.
- w [in]
-
Type: number
The width, in pixels, of the rectangle in relation to the coordinates of the canvas.
- h [in]
-
Type: number
The height, in pixels, of the rectangle in relation to the coordinates of the canvas.
Return value
This method does not return a value.
Standards information
- HTML Canvas 2D Context, Section 8
Remarks
If the w or h parameter is zero, the ICanvasRenderingContext2D::fillRect method does not draw the rectangle.
Examples
This example shows the how to use fillRect with a video for the pattern. The video pattern works best when the video size is small. The width of the canvas is automatically scaled to the IHTMLWindow7::innerWidth of the browser window. If you expand your window, refresh the example.
<!DOCTYPE html> <html> <head> <title>Video pattern example</title> <!-- only force Internet Explorer standards mode for testing on local or intranet machine --> <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge" /> --> <style> button { width:150px; } </style> </head> <body> <table> <tr> <td> <div> <h1>Canvas Patterns with Video</h1> <h3>Make your page full screen, and click the buttons to change the view</h3> <button onclick="draw('repeat')">Repeat all</button> <button onclick="draw('repeat-x')">Repeat across</button> <button onclick="draw('repeat-y')">Repeat down</button> <button onclick="draw('no-repeat')">No Repeat</button><br /> <label>Enter a video URL: <input type="text" id="videoSrc" size="80" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" /></label> <br /> </div> </td> <td> <video id="pix" controls autoplay width="300"> This browser or document mode doesn't support video </video><br /> </td> </tr> </table> <canvas id="MyCanvas" width="2000" height="2000">This browser or document mode doesn't support canvas</canvas> <script > // Some global variables var canvas = document.getElementById("MyCanvas"); var lastDirection; var timerID; var pattern; var lastSrc; var video = document.getElementById("pix"); // Get the video object. // Check for canvas, and get context if (canvas.getContext) { var ctx = canvas.getContext("2d"); // Get the context. // Optionally set based on window width/height // canvas.width = window.innerWidth; // Set canvas width and height // canvas.height = window.innerHeight; var w = canvas.width; // Set up w and h for loop below. var h = canvas.height; } function draw(direction) { if (ctx) { var src = document.getElementById("videoSrc").value; if (src == "") { return false; } if (lastSrc != src) { // Change of video video.src = src; // Assign the video src lastSrc = src; // Reassign lastSrc video.load(); // Load src into video control video.play(); // Play it } // Clear the screen every time a new direction is selected. if (lastDirection != direction) { // Check if direction has changed window.cancelAnimationFrame(timerID); ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the last image. lastDirection = direction; // Reset the direction flag } draw2(); } } function draw2() { if (video.paused || video.ended) { return false; } // Stop loop when video ends pattern = ctx.createPattern(video, lastDirection); // Get the video frame ctx.fillStyle = pattern; // Assign pattern as a fill style. ctx.fillRect(0, 0, w, h); // Fill the canvas. timerID = window.requestAnimationFrame(draw2); } draw("repeat"); // Start video when loaded </script> </body> </html>
See also
- ICanvasRenderingContext2D::strokeRect
- ICanvasRenderingContext2D::fillStyle
- ICanvasRenderingContext2D::createPattern
- msFillRule
- ICanvasGradient::addColorStop
- ICanvasRenderingContext2D::createLinearGradient
- ICanvasRenderingContext2D::createRadialGradient

