Quick Start Full Stack Web Development/

...

/

Gallows Component: Adding the Body

Gallows Component: Adding the Body

Design the rest of the Gallows component in this lesson.

We'll cover the following...

Adding the body to the Gallows

We can then add additional parts depending on the number of bad guesses.

Press + to interact
const badGuesses = this.props.badGuesses;
if (badGuesses >= 1) {    // head
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.arc(125, 75, 30, 0, 2 * Math.PI);
    ctx.stroke();
}
if (badGuesses >= 2) {    // torso
    ctx.fillRect(120, 110, 10, 80);
}

These methods are documented within the canvas HTML documentation. The arc method draws part of a ...