Search⌘ K
AI Features
Home
Courses
Quick Start Full Stack Web Development

Gallows Component: Adding the Body

Explore how to add the Gallows body in React by using HTML Canvas methods such as arcs and quadratic Bezier curves. Understand how to create smooth shapes and update interactive components. This lesson helps you build dynamic UI parts with reusable canvas drawing techniques.

We'll cover the following...

Adding the body to the Gallows

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

Javascript (babel-node)
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 ...