From 70f58d5584374cbbb5902f233676f279a751be3c Mon Sep 17 00:00:00 2001
From: hexagonhexagon <hexagonhexagon163@gmail.com>
Date: Thu, 25 Jun 2020 15:25:44 -0400
Subject: [PATCH] Fix bug where waypoints with the same shape key display
 wrong.

---
 src/js/game/hud/parts/waypoints.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/js/game/hud/parts/waypoints.js b/src/js/game/hud/parts/waypoints.js
index 2472e57a..4d046e64 100644
--- a/src/js/game/hud/parts/waypoints.js
+++ b/src/js/game/hud/parts/waypoints.js
@@ -153,7 +153,16 @@ export class HUDWaypoints extends BaseHUDPart {
 
             if (ShapeDefinition.isValidShortKey(label)) {
                 const canvas = this.getWaypointCanvas(waypoint);
-                element.appendChild(canvas);
+                /**
+                 * Create a clone of the cached canvas, as calling appendElement when a canvas is
+                 * already in the document will move the existing canvas to the new position.
+                 */
+                const [newCanvas, context] = makeOffscreenBuffer(48, 48, {
+                    smooth: true,
+                    label: canvas.label + "-waypoint-" + i,
+                });
+                context.drawImage(canvas, 0, 0);
+                element.appendChild(newCanvas);
                 element.classList.add("shapeIcon");
             } else {
                 element.innerText = label;