createPattern method

Returns a CanvasPattern object that repeats the specified element in the specified direction.

HTML Canvas 2D Context, Section 5Internet Explorer 9

Syntax

var retval = CanvasRenderingContext2D.createPattern(image, repetition);

Parameters

image [in]

Type: Object

An image, canvas, or video element of the pattern to use.

repetition [in]

Type: number

The direction of repetition. This parameter specifies one of the following values:

repeat

The pattern repeats in both horizontal and vertical directions.

repeat-x

The pattern repeats only in the horizontal direction.

repeat-y

The pattern repeats only lin the vertical direction.

no-repeat

The pattern prints only once and does not repeat.

Return value

Type: CanvasPattern

The pattern object to use as a fill style together with a CanvasRenderingContext2D object.

Standards information

Remarks

If the repetition parameter equals null or an empty string, the createPattern method assumes that the repetition parameter is repeat.

Examples

The following code example demonstrates each type of direction that you can repeat an image in a canvas. See the sample in action.


<!DOCTYPE html> 
<html>
<head>
  <title>Canvas pattern example</title> 
</head>
<body>
  <h1>Canvas pattern example</h1>
    <p>This picture will appear below.</p>
    <div>
    <img id="pix" src="http://go.microsoft.com/fwlink/p/?linkid=199028" />   
    </div>
    <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 />     
  <canvas id="MyCanvas" width="600" height="500">
    This browser or document mode doesn't support canvas
  </canvas>   
  
  <script>
    var image;
    function draw(direction) {
      var canvas = document.getElementById("MyCanvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");                // Get the context.
        ctx.clearRect(0, 0, canvas.width, canvas.height);    // Clear the last image if it exists.
        image = document.getElementById("pix");       // Get the address of the picture.
        var pattern = ctx.createPattern(image, direction);// Get the direction from the button.    
        ctx.fillStyle = pattern;                          // Assign pattern as a fill style.
        ctx.fillRect(0, 0, canvas.width, canvas.height);     // Fill the canvas.   
      }
    }
    //  Start display when image is loaded. 
    image = document.getElementById("pix");
    image.addEventListener("load", function () {
      draw("repeat"); // Start display
    }, false);

  </script>

</body>
</html> 
 


This example shows the same effect but uses video for the pattern. The video pattern works best when the video size is small. The width of the canvas is set to 2000 x 2000 pixels. However, you can automatically scale it to the innerWidth of the browser window by un-commenting two lines. If you use the innerWidth, when you expand your window, be sure to refresh the example. See the sample in action. The Creating a video fill pattern in canvas blog post describes the example more fully.


<!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
msFillRule
addColorStop
createLinearGradient
createRadialGradient

 

 

Show:
© 2014 Microsoft