Guard obstacle drawing behind flag

boids.mjs

@@ -64,6 +64,7 @@ class Boids
 
             radius: 10,
             color: 'black',
+            debug: false,
         }, params);
 
         // Current width and height of the canvas
@@ -277,15 +278,18 @@ class Boids
         );
 
         // Draw obstacles
-        this.ctx.fillStyle = '#dddddd';
+        if (this.params.debug)
-        this.ctx.beginPath();
-
-        for (let i = 0; i < obstaclesLength; ++i)
         {
-            this.obstacles[i].draw(this.ctx);
+            this.ctx.fillStyle = '#dddddd';
-        }
+            this.ctx.beginPath();
 
-        this.ctx.fill();
+            for (let i = 0; i < obstaclesLength; ++i)
+            {
+                this.obstacles[i].draw(this.ctx);
+            }
+
+            this.ctx.fill();
+        }
 
         // Draw boids
         this.ctx.fillStyle = this.params.color;

index.html

@@ -32,7 +32,7 @@
                 new Rectangle(-400, -200, 200, 150),
                 new Circle(200, 200, 100),
                 new Circle(300, 200, 100),
-            ]);
+            ], {debug: true});
 
             canvas.onclick = ev =>
             {