Hangman - The Essential Guide to HTML5 - page 305

Code Explanation

drawrightleg,

Draws the right leg

drawleftleg, Draws the left leg

drawnoose

Draws the noose

];

Ends the array steps

var cur = 0; Points to the next drawing in steps

function drawgallows() {

Header for the function drawing the gallows

ctx.lineWidth = 8;

Sets the line width

ctx.strokeStyle = gallowscolor; Sets the color

ctx.beginPath();

Begins the drawing path

ctx.moveTo(2,180); Moves to the first position

ctx.lineTo(40,180);

Draws a line

ctx.moveTo(20,180); Moves to the next position

ctx.lineTo(20,40);

Draws a line

ctx.moveTo(2,40); Moves to the next position

ctx.lineTo(80,40); Draws the line

ctx.stroke();

Actually draws the whole path

ctx.closePath(); Closes the path

} Closes the function

function drawhead() {

Header for the function drawing the head of
the victim

ctx.lineWidth = 3;

Sets the line width

ctx.strokeStyle = facecolor;

Sets the color