HTML and CSS Reference
In-Depth Information
Code
Explanation
ctx.save();
Saves the current stage of the coordinate
system
ctx.scale(.6,1);
Applies scaling, namely squeezes the x axis
ctx.beginPath();
Start a path
ctx.arc (bodycenterx/.6,80,10,0,
Math.PI*2,false);
Draws an arc. Note that the x coordinate is
modified to work for the scaled coordinate
system. The complete arc will be an oval.
ctx.stroke();
Actually does the drawing
ctx.closePath();
Closes the path
ctx.restore();
Restores (goes back to) the coordinates
before the scaling
}
Closes function
function drawbody() {
Header for the function that draws the body, a
single line
ctx.strokeStyle = bodycolor;
Sets the color
ctx.beginPath();
Starts the path
ctx.moveTo(bodycenterx,90);
Moves to the position (right below head)
ctx.lineTo(bodycenterx,125);
Draws the line
ctx.stroke();
Actually draws the path
ctx.closePath();
Closes the path
}
Closes the function
function drawrightarm() {
Header for the function that draws the right
arm
ctx.beginPath();
Starts the path
ctx.moveTo(bodycenterx,100);
Moves to the position
