The Essential Guide to HTML5

(Greg DeLong) #1

CHAPTER 9


Code Explanation


ctx.lineTo(bodycenterx-10,155); Draws the line


ctx.stroke(); Actually draws the path


ctx.closePath(); Closes the path


} Closes the function


function drawnoose() { Header for the function that draws noose


ctx.strokeStyle = noosecolor; Sets the color


ctx.beginPath(); Starts the path


ctx.moveTo(bodycenterx-10,40); Moves to the position


ctx.lineTo(bodycenterx-5,95); Draws the line


ctx.stroke(); Actually draws the path


ctx.closePath(); Closes the path


ctx.save(); Saves the coordinate system


ctx.scale(1,.3); Does the scaling, which, squeezes the image
vertically (on the y axis)


ctx.beginPath(); Starts a path


ctx.arc(bodycenterx,95/.3,8,0,Math.
PI*2,false);


Draws a circle (which will become an oval)

ctx.stroke(); Actually draws the path


ctx.closePath(); Closes the path


ctx.restore(); Restores the saved coordinate system


drawneck(); Draws the neck on top of the noose


drawhead(); Draws the head on top of the noose

Free download pdf