THUNDERING YOUR SITE WITH CANVAS - HTML5 - page 259

color:#8A0917;
background-color:#B8AE9C;
}
a {
text-decoration:none;
color:#595241;
margin-left:16px;
}
</ style >
< title > Stroke and Cut </ title >
</ head >
< body onLoad = ”CanvasMaster.showCanvas()” >
<article>
<figure>
<canvas id = ”strokeAndChomp” width = ”100” height = ”100” > You ought to see what
HTML5 browsers see! Get one now! </canvas>
<figcaption> < br />
Square Work </figcaption>
</figure>
<section>
< p >< a href = ”#” onClick = ”CanvasMaster.addStroke()” > Add Stroke </ a ></ p >
</section>
<section>
< p >< a href = ”#” onClick = ”CanvasMaster.chomp()” > Gobble Up Square </ a ></ p >
</section>
<section>
< p >< a href = ”#” onClick = ”CanvasMaster.punchOut()” > Punch Hole </ a ></ p >
</section>
<section>
< p >< a href = ”#” onClick = ”CanvasMaster.showCanvas()” > Replace Square </ a ></ p >
</section>
</article>
</ body >
</ html >

263

h is page is formatted for a mobile device. It was tested in Opera Mini on an iPhone, as
shown in Figure 13-7.

A blue square appears on the initial load. When you add a stroke line, a frame appears just
inside the original image. If you add more strokes, you'll i nd that the stroke darkens. When
you click the Punch Hole selection, a small square appears in the middle of the blue square.
h e Gobble Up Square selection removes both the image and the stroke. If you click the Add
Stroke text at er having removed the blue square, you'll see the stroke line only with no blue
rectangle.