When I draw a stickman, I make extensive use of the drawing context. Because I’m translating and rotating the context, I don’t have to keep track of or calculate the position of the stickman’s joints.

Using the context for the first time can be a little strange. The context view on the left shows us what the context looks like as we are drawing in it. The outside view on the right shows us what the viewer will see when the drawing is done. The context stack in the center lists all of the changes we’ve made to the context to get to that point.

The first thing I do is save the “state” of the context. Saving the context is like saving a version of a document. By saving the context now, I’ll be able to undo any changes and return to this state later. I’ve stored a reference to the context in a variable named ctx.

Then I set the stroke color and line width of my pen. I want my lines to be black and two pixels wide.

Right now, the origin of the context is at (0, 0) in the top left corner of the <canvas>. Unless I want to draw the stickman in the top left corner, I need to move the origin. Use the number fields to move the origin to the point where you’d like to draw the stickman’s belly button.

x: , y:

Before drawing the stickman’s torso, I rotate the context so that the y-axis is at the same angle as the torso. Remember, the y-axis points down.

Angle of the torso:

Stickman’s torso connects to his head 80 pixels above his belly button. I move the context’s origin up 80 pixels to make it a little easier to draw his torso and head.

Now that the context’s origin is located at the top of his neck and the context is at the same angle as his body, I draw stickman’s torso by drawing a line from (0, 0) straight down to (0, 100). Whenever we draw on <canvas>, we are drawing in the context view and using the context’s coordinate system.

Then I draw his head by drawing a circle centered at (0, -30) with a radius of 30 pixels.

With his torso and head done, it’s time to draw stickman’s arms. I move the origin down 20 pixels to the location of his shoulders.

Since I need to return to this shoulder position later to draw his left arm after drawing his right arm, I save the context. This adds a second save point to the context stack.

Before drawing stickman’s right upper arm, I rotate the context so that the y-axis is at the same angle as his right upper arm.

Angle of the right upper arm:

With the origin located at his shoulder and the context at the necessary angle, I draw his right upper arm by drawing a line from (0, 0) straight down to (0, 60).

To draw stickman’s right forearm, I need to move the origin to the location of his right elbow. I have no idea what the coordinates of the right elbow are in the outside view, but inside the context view in its current state, the right elbow is at (0, 60). So I move the origin to (0, 60).

Before drawing stickman’s right forearm, I rotate the context so that the y-axis is at the same angle. This right forearm angle is relative to the angle of the right upper arm. If the right forearm angle is 0°, then the right arm is completely straight. If the right forearm angle is 90°, then the right arm is bent at a right angle.

Angle of the right forearm:

I draw the right forearm by drawing a line from (0, 0) straight down to (0, 50).

With the right arm done, it’s time to draw the left arm. To do that, I want to move the origin back to the location of the shoulders and reset the angle of the context so that it is lined up with the torso. Here is where those save points come in handy. If I tell the context to restore the last save point, it will undo all of the changes I did to the context when drawing the right arm, and the context will be back to the state I want.

When we return to the last save point, the save point is removed from the stack. Since I’m going to want to return the context to this state again after drawing the left arm, I save the context again. This puts the save point back onto the stack.

Now I basically follow the same procedure I used to draw stickman’s right arm to draw his left arm. I start by rotating the context to match the angle of the left upper arm.

Angle of the left upper arm:

I draw the left upper arm by drawing a line from (0, 0) straight down to (0, 60).

I move the origin to the location of the left elbow.

I rotate the context to match the angle of the left forearm.

Angle of the left forearm:

I draw the left forearm by drawing a line from (0, 0) straight down to (0, 50).

Then I return to the last save point where the origin is located at the shoulders and the context is at the same angle as the torso.

To draw stickman’s legs, I move the origin down to his hips, which are 80 pixels below his shoulders.

Then I save the context so that I can return to this hip position later to draw the left leg after drawing the right leg.

I rotate the context to match the angle of the right thigh.

Angle of the right thigh:

I draw the right thigh by drawing a line from (0, 0) straight down to (0, 80).

I move the origin to the location of the right knee.

I rotate the context to match the angle of the right lower leg.

Angle of the right lower leg:

I draw the right lower leg by drawing a line from (0, 0) straight down to (0, 60).

Then I return to the last save point where the origin is located at the hips and the context is at the same angle as the torso.

I rotate the context to match the angle of the left thigh.

Angle of the left thigh:

I draw the left thigh by drawing a line from (0, 0) straight down to (0, 80).

I move the origin to the location of the left knee.

I rotate the context to match the angle of the left lower leg.

Angle of the left lower leg:

I draw the left lower leg by drawing a line from (0, 0) straight down to (0, 60).

Stickman is now done. When I’m done with a drawing, I like to return the context back to its original state. That way, if I decide to come back and draw some more, I know my starting point. That’s why I set a save point at the very beginning before drawing anything.

Using the context takes practice, but it can make drawing on <canvas> much easier. Imagine if we had to calculate new coordinates for his right forearm every time stickman rotated his right upper arm. By using the context, we can draw a stickman that we can pose just by changing a few angles.

Click the button to continue or the button to go back.

Pose a stickman.