• Choose a category
• All
• Classic-Fiction

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

}

}

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.

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

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

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.

Creating Shadows on Canvas Shapes

We can add shadows to shapes we draw on the canvas using four parameters. As with the tiled fill patterns in the previous section, this feature has not been fully implemented on all HTML5-compliant browsers.

We add a shadow by setting four Canvas properties:

shadowOffsetX

shadowOffsetY

shadowBlur

shadowColor

The shadowOffsetX and shadowOffsetY values can be positive or negative. Negative values will create shadows to the left and top rather than to the bottom and right. The shadowBlur property sets the size of the blurring effect on the shadow. None of these three parameters is affected by the current Canvas transformation matrix. The shadowColor can be any color set via HTML4 color constant string—rgb() or rgba()—or with a string containing a hex value.

Example 2-27 and Figure 2-39 show a few different boxes drawn with various shadow settings.

Figure 2-39. Adding shadows to drawn objects

Example 2-27. Adding shadows to drawn objects

function drawScreen() {

context.fillStyle = 'red';

context.shadowOffsetX = 4;

context.shadowOffsetY = 4;

context.shadowColor = 'black';

context.shadowBlur = 4;

context.fillRect(10,10,100,100);

context.shadowOffsetX = -4;

context.shadowOffsetY = -4;

context.shadowColor = 'black';

context.shadowBlur = 4;

context.fillRect(150,10,100,100);

context.shadowOffsetX = 10;

context.shadowOffsetY = 10;

context.shadowColor = 'rgb(100,100,100)';

context.shadowBlur = 8;

context.arc(200, 300, 100, (Math.PI/180)*0, (Math.PI/180)*360, false)

context.fill();

}

As you can see, if we adjust the shadowOffset values along with the shadowBlur value, we create various shadows. We can also create shadows for complex shapes drawn with paths and arcs.

What’s Next

We covered a lot of ground in this chapter, introducing the ways to construct primitive and complex shapes, and how we can draw and transform them on the canvas. We also discussed how to composite, rotate, scale, translate, fill, and create shadows on these shapes. But we’ve only just begun exploring HTML5 Canvas. In the next