fillRect method

Paints a rectangle onto a CanvasRenderingContext2D object by using the current fill style.

HTML Canvas 2D Context, Section 8Internet Explorer 9

Syntax

CanvasRenderingContext2D.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

Remarks

If the w or h parameter is zero, the fillRect method does not draw the rectangle.

Examples

The following code example fills rectangles by using a linear gradient and a solid color.


<!DOCTYPE html> <html>
<head>
  <script type="text/javascript">
function draw()
{
  var canvas = document.getElementById("MyCanvas");
    if (canvas.getContext) {
      //get a context       
      var ctx = canvas.getContext("2d");
      //create a gradient object
      var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
      // Add the colors with fixed stops at 1/4 of the width.
      gradient.addColorStop("0","magenta");
      gradient.addColorStop(".25","blue");
      gradient.addColorStop(".50","green");
      gradient.addColorStop(".75","yellow");
      gradient.addColorStop("1.0","red");      
      // Use the gradient as a fill pattern
      ctx.fillStyle = gradient;
      ctx.fillRect (0,0,300,250);  
      ctx.fillStyle = "blue";
      ctx.fillRect(250,300,600,500);
    }  
}
  </script>
</head>
<body onload="draw();">
  <canvas id="MyCanvas" width="600" height="500"> </canvas> 
</body>
</html>


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 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

CanvasRenderingContext2D
strokeRect
fillStyle
createPattern
msFillRule
addColorStop
createLinearGradient
createRadialGradient

 

 

Show:
© 2014 Microsoft