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

Gallows Component: Adding the Body

Explore adding the body to the Gallows component by using React with the HTML Canvas API. Understand how to draw arcs and curves for a smooth, interactive design. Learn techniques to enhance your front-end with dynamic graphics and integrate them into a React project.

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 ...