Cannonball and Slingshot - The Essential Guide to HTML5 - page 131

Code Explanation

this.bx = bx;

Set property bx

this.by = by; … by

this.s1x = s1x; … s1x

… s1y

this.s1y = s1y;

this.s2x = s2x; … s2x

this.s2y = s2y; … s2y

this.s3x = s3x;

… s3x

this.s3y = s3y; … s3y

this.strokeStyle = stylestring;

… strokeStyle

this.draw = drawsling; Set the draw method

this.moveit = movesling;

Set the move method (not used)

} Close function

function drawsling() {

Function header for drawsling

ctx.strokeStyle = this.strokeStyle; Set this style

ctx.lineWidth = 4; Set line width

ctx.beginPath();

Start the path

ctx.moveTo(this.bx,this.by); Move to bx,by

ctx.lineTo(this.s1x,this.s1y); Set up to draw to s1x,s1y

ctx.moveTo(this.bx,this.by);

Move to bx,by

ctx.lineTo(this.s2x,this.s2y); Set up to draw to s2x,s2y

ctx.moveTo(this.s1x,this.s1y);

Move to s1x,s1y