HTML and CSS Reference
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 >
canvasNow = document.getElementById(“strokeAndChomp”);
contextNow = canvasNow.getContext('2d');
contextNow.fillStyle = '#ACCFCC';
</ script >
< style type = ”text/css” >