THUNDERING YOUR SITE WITH CANVAS - HTML5 - page 258

h e image in Figure 13-6 may appear vaguely familiar. In Chapter 4, the color scheme
program Adobe Kuler had a similar layout, and the colors were developed in Adobe Kuler.

Adding strokes and removing drawings
Two more methods associated with drawing rectangles are strokeRect() and clear-
Rect() . Both of these methods have parameters similar to the fillRect() method — x ,
y , width , height . h ey function the same insofar as specifying which areas to add a stroke
or remove a drawing.

h e following program ( StrokeAndRemove.html in this chapter's folder at www.wiley.
com/go/smashinghtml5 ) shows how you can add three methods to the CanvasMaster
object, which I'll call addStroke() , punchOut() , and chomp() . h e i rst method draws
an outline within the canvas area, the second makes a hole in the middle of the rectangle, and
the third method removes everything in the dei ned area.

<! DOCTYPE html >
< html >
< head >
< script language = ”javascript” >
//colors: 595241,B8AE9C,FFFFFF,ACCFCC,8A0917
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById(“strokeAndChomp”);
contextNow = canvasNow.getContext('2d');

262

contextNow.fillStyle = '#ACCFCC';
contextNow.fillRect(5,20,100,100);

contextNow.fill();
}
CanvasMaster.addStroke=function()
{
contextNow.strokeStyle='#595241';
contextNow.strokeRect(7,22,91,76);
}
CanvasMaster.chomp=function()
{
contextNow.clearRect(5,20,100,100);
}
CanvasMaster.punchOut=function()
{
contextNow.clearRect(40,45,30,30);
}
</ script >
< style type = ”text/css” >
body {
font-family:Verdana;