Rock, Paper, Scissors - The Essential Guide to HTML5 - page 264

The parameters of the function hold all the information. The selection of names sx , sy , and so on, avoids
built-in terms by making a simple modification: putting s, for stored, in front. The location of the button is at
sx, sy . The color of the rectangle is represented by rectcolor . The file name for the image is held by
picture . What we can think of as the inner and outer widths and the inner and outer heights are
calculated based on the inputs smargin , sheight , and swidth . The b in bheight and bwidth stands for
big. The s stands for small and stored. Don't get too hung up on the proper name—there is no such thing.
The names are up to you and if a name works, meaning you remember it, it works.

The img attribute of a Throw object is an Image object. The src of that Image object is what points to the
file name that was passed to the function in the picture parameter.
Notice that the attribute this.draw is set to be drawThrow . This sets up the drawThrow function to be
used as the draw method for all objects of type Throw . The coding is more general than it needs to be:
each of the three graphics has the same margin and width and height. However, theres no harm in making
the coding general, and if you want to build on this application to make one in which objects representing
the player's choices are more complex, much of this code would work.

Tip: Dont worry when writing programs if you have code such as this.draw = drawThrow; and you
haven't written the drawThrow function yet. You will. Sometimes it is impossible to avoid referencing
a function or variable before it has been created. The critical factor is that all this coding is done
before you try to execute the program.

Heres the drawThrow method:
function drawThrow() {
ctx.strokeStyle = "rgb(0,0,0)";
ctx.strokeRect(this.sx,this.sy,this.bwidth,this.bheight);
ctx.fillStyle = this.fillstyle;
ctx.fillRect(this.sx,this.sy,this.bwidth,this.bheight);
ctx.drawImage(this.img,this.sx+this.smargin,this.sy+this.smargin, ➥

this.swidth,this.sheight);

}
As promised, this draws an outline of a rectangle using black for the color rgb(0,0,0) . Recall that ctx is
the variable set with the property of the canvas element that is used for drawing. Black is actually the
default color, making this line unnecessary. However, well put it in just in case you reuse this code in an
application where the color has been changed previously. Next, the function draws a filled-in rectangle
using the rectcolor passed in for this particular object. Lastly, the code draws an image on top of the
rectangle, offset by the margin amount horizontally and vertically. The bwidth and bheight are
calculated to be bigger than the swidth and sheight , respectively, by twice the smargin value. This in
effect centers the image inside the rectangle.
The three buttons are created as Throw objects through the use of var statements, in which the variable
is initialized using the new operator, and a call to the Throw constructor function. To make this work, we
need pictures of rock, paper, and scissors, which Ive acquired by a variety of means. The three image
files are located in the same folder as the HTML file.
var rockb = new Throw(rockbx,rockby,8,50,50,"rgb(250,0,0)","rock.jpg");
var paperb = new Throw(paperbx,paperby,8,50,50,"rgb(0,200,200)","paper.gif");