O'Reilly logo

HTML5 Canvas by Jeff Fulton, Steve Fulton

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Filling Shapes with Patterns

We will cover using bitmap images on the canvas in Chapter 4, but for now, let’s take a quick look at how images can be used as fill patterns for shapes we draw.

Fill patterns are initialized with the createPattern() function, which takes two parameters. The first is an Image object instance, and the second is a String representing how to display the repeat pattern inside the shape. We can use a loaded image file or an entire other canvas as a fill pattern for a drawn shape.

There are currently four types of image fills:

  • repeat

  • repeat-x

  • repeat-y

  • no-repeat

Modern browsers have implemented these four types to various degrees, but standard repeat seems to be the most common. Let’s look at it now and then we will take a brief look at the other three.

Figure 2-34 shows a simple bitmap fill pattern that we can use to test this functionality. It is a 20×20 green circle on a transparent background, saved as a .gif file named fill_20x20.gif.

The fill_20x20.gif image for our fill

Figure 2-34. The fill_20x20.gif image for our fill

Example 2-25 tests this first with the repeat string to create a box full of little green circles, as shown in Figure 2-35.

Example 2-25. Filling with an image file using repeat

function drawScreen() {

      var fillImg = new Image();
      fillImg.src = 'fill_20x20.gif';
      fillImg.onload = function(){

         var fillPattern = context.createPattern(fillImg,'repeat');
         context.fillStyle = fillPattern;
         context.fillRect(0,0,200,200);

      }

   }
repeat fill example

Figure 2-35. repeat fill example

It is best not to use Image instances until they have loaded completely. We will cover this in detail in Chapter 4, but for now, we simply create an inline onload event handler function that will be called when Image is ready to be used. The repeat pattern string does a good job of completely filling the 200×200 square. Let’s see the code for how the other repeat strings perform (in Example 2-26), and view the results in Figures 2-36 through 2-38.

Example 2-26. Using the no-repeat, repeat-x, and repeat-y strings

function drawScreen() {


      var fillImg = new Image();
      fillImg.src = 'fill_20x20.gif';

      fillImg.onload = function(){

         var fillPattern1 = context.createPattern(fillImg,'no-repeat');
         var fillPattern2 = context.createPattern(fillImg,'repeat-x');
         var fillPattern3 = context.createPattern(fillImg,'repeat-y');

         context.fillStyle = fillPattern1;
         context.fillRect(0,0,100,100);

         context.fillStyle = fillPattern2;
         context.fillRect(0,110,100,100);

         context.fillStyle = fillPattern3;
         context.fillRect(0,220,100,100);

      }

   }

Note

Each browser will show these patterns in a different manner.

no-repeat, repeat-x, and repeat-y in Safari

Figure 2-36. no-repeat, repeat-x, and repeat-y in Safari

no-repeat, repeat-x, and repeat-y in Firefox

Figure 2-37. no-repeat, repeat-x, and repeat-y in Firefox

no-repeat, repeat-x, and repeat-y in Chrome

Figure 2-38. no-repeat, repeat-x, and repeat-y in Chrome

Only Firefox seems to show anything of significance when the repeat-x and repeat-y strings are used in the repeat parameter. We will cover more examples of filling, as well as many other uses for bitmap images, in Chapter 4.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required