miniMap.js

class MiniMap {
   constructor(canvas, graph, size) {
      this.canvas = canvas;
      this.graph = graph;
      this.size = size;

      canvas.width = size;
      canvas.height = size;
      this.ctx = canvas.getContext("2d");
   }

   update(viewPoint) {
      this.ctx.clearRect(0, 0, this.size, this.size);

      const scaler = 0.05;
      const scaledViewPoint = scale(viewPoint, -scaler);
      this.ctx.save();
      this.ctx.translate(
         scaledViewPoint.x + this.size / 2, 
         scaledViewPoint.y + this.size / 2
      );
      this.ctx.scale(scaler, scaler);
      for (const seg of this.graph.segments) {
         seg.draw(this.ctx, { width: 3 / scaler, color: "white" });
      }
      this.ctx.restore();
      new Point(this.size / 2, this.size / 2)
         .draw(this.ctx, { color: "blue", outline: true });
   }
}