Pose a stickman

As I was learning to draw a stickman using the context, I realized that I could make my stickman posable if—instead of hard-coding his angles—I wrote a drawStickman subroutine that would take nine angles as inputs and draw my stickman for me.

Here is stickman in his Heisman pose. I store the nine angles needed to describe his pose in an array named pose. The angle of his torso is 32° and the angle of his right upper arm is 50°. I save the context, translate the origin to the center of the <canvas>, call the drawStickman subroutine and pass it the array of angles, and then restore the context back to its last save point after the drawing is done.

Here is stickman in his crane stance as his evil twin sister leaps at him with a flying kick. Notice how I have two arrays of angles, pose1 and pose2, but I am using the same subroutine to draw both twins.

pose1 = [3, 95, -80, 30,
-20, -15, -110, 15, 115];
 
ctx.save();
ctx.translate(70, 180);
drawStickman(pose1);
ctx.restore();
 
pose2 = [40, 55, -60, 0,
130, 65, -95, 0, 140];
 
ctx.save();
ctx.translate(280, 170);
drawStickman(pose2);
ctx.restore();

Because of how the drawStickman subroutine is designed, stickman is extremely easy to pose and reuse in other drawings. Use the number fields to pose stickman in any position you’d like.

Torso angle:

Right upper arm angle:

Left upper arm angle:

Right lower arm angle:

Left lower arm angle:

Right upper leg angle:

Left upper leg angle:

Right lower leg angle:

Left lower leg angle:

Besides his angles, there are a few other variables that we can easily change in the drawStickman subroutine. Play around with them and see what you can come up with.