The Gallows Component

There are several options available when it comes to creating graphical elements. Graphics can be created as images, such as PNG or GIF or scalable vector graphic (SVG) files. The advantage of the SVG format is that it can be scaled to any size without getting pixelated because it describes strokes within the picture. It’s also possible to create a graphical SVG element in HTML using JavaScript to describe the strokes. The HTML canvas is a very useful element that can be used to create graphics and is often used for graphs and in-browser games. This, and the fact that there are some potential gotchas, makes it a good topic to cover here in the example of the gallows.

HTML Canvas

There are a few new ideas here so we need to go step by step. To draw within a canvas element from React, the steps are to render the canvas element, use a reference to the element to get its context, and use the lifecycle methods to draw in the canvas after it has rendered. We’ll put this new component in a new file, which we’ll call gallows.js. Here’s a starting point: