+}
+
+/**
+ * Draws a path in context from the current location to a point xDist * left, yDist * up away from it.
+ * @param ctx RenderingContext
+ * @param x, y float current location
+ * @param x, y float distance away
+ * @param up, left (-1|1) directions
+ * @return [newNodeX, newNodeY]
+ */
+const drawBranchFrom = (ctx, x, y, xDist, yDist, left, up) => {
+ const newX = x + (xDist * left)
+ const newY = y + (yDist * up)
+ ctx.lineTo(x, newY);
+ ctx.lineTo(newX, newY);
+ return [newX, newY];
+}
+
+const drawArtistOnCtx = (ctx, artistName, x, y) => ctx.strokeText(artistName, x, y);
+
+/**
+ * Draws paths to the terminal nodes of a round
+ * @param x, y the point representation of the start of the branch
+ */
+const drawMatchup = (canvas, x, y, iter, left) => {
+ const ctx = canvas.getContext("2d");
+ const [width, height] = getDimensions(canvas);
+
+ const drawBranchUp = (xDist, yDist) => drawBranchFrom(ctx, x, y, xDist, yDist, left, 1);
+ const drawBranchDown = (xDist, yDist) => drawBranchFrom(ctx, x, y, xDist, yDist, left, -1);
+ const drawArtist = (artistName, x, y) => drawArtistOnCtx(ctx, artistName, x, y);