HTML and CSS Reference
In-Depth Information
h e rendering context method drawImage() expects three parameters:
h e reference to the i le that you're loading: In this case, the label pic is the reference
name to the i le being used.
h e x and y position: It's a little more involved than using the <img> tag, but not much,
and this method lets you place the image where you want it within the canvas
parameters.
h e source of the image: You add the source of the image within the method that creates
the rendering context — not unlike the identii cation using the img element.
Adding a drop shadow
Adding a drop shadow to an image gives it a three-dimensional look — it's elevated of the
page. h e rendering context has four shadow properties:
shadowColor=”color”;
shadowOffsetX=horizontal value;
shadowOffsetY=horizontal value;
shadowBlur=blur value;
h e color can be assigned using any of the methods discussed in Chapter 4. h e shadow
of sets depend on how big you want your shadow. Experiment with dif erent values, begin-
ning with about 5. In the following example, each is set to 10 to provide enough shadow to
make the image rise of the screen but not so much to overwhelm the image. Finally, the blur
value can be greater or smaller depending on both the of set values and the amount of blur
you want. With greater of set values, you need greater blur values.
265
To make the shadow have an ef ect on the image, all shadow properties must be entered
before writing the drawImage() method. h at's all there is to it. h e other JavaScript to set
up the canvas context rendering is very similar to the drawings in the previous section. h e
following code ( PhotoShadows.html in this chapter's folder at www.wiley.com/go/
smashinghtml5 ) loads the image and places the drop shadow on it:
<! DOCTYPE html >
< html >
< head >
< script language = ”javascript” >
//colors: F4F1BC,736F36,BFB95A
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById(“picFrame”);
contextNow = canvasNow.getContext('2d');
pic = new Image();
pic.onload = function()
 
Search WWH ::




Custom Search