2 files changed, 48 insertions, 8 deletions
diff --git a/html/tower/js/game.js b/html/tower/js/game.js
index 2fdcc84..1099c46 100644
--- a/html/tower/js/game.js
+++ b/html/tower/js/game.js
@@ -121,12 +121,29 @@ function spawnEnemies(timestamp) {
  * - Separation of rendering and game logic
  */
 function renderGame() {
-    renderGrid(ctx, gameState.grid);        // Background grid
-    renderParticles(ctx, gameState.particles); // Particles (including slime) go under everything
+    // Clear and reset canvas state at the start
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    
+    // Save initial state
+    ctx.save();
+    
+    // Render game elements
+    renderGrid(ctx, gameState.grid);
+    renderParticles(ctx, gameState.particles);
     renderProjectiles(ctx, gameState.projectiles);
     renderTowers(ctx, gameState.towers);
-    renderEnemies(ctx, gameState.enemies);   // Enemies on top of slime trail
+    renderEnemies(ctx, gameState.enemies);
+    
+    // Restore to clean state before UI
+    ctx.restore();
+    ctx.save();
+    
+    // Render UI with clean state
     renderUI(ctx, gameState);
+    
+    // Final restore
+    ctx.restore();
 }
 
 // Start the game
diff --git a/html/tower/js/renderer.js b/html/tower/js/renderer.js
index 9bebe0b..cf52ebc 100644
--- a/html/tower/js/renderer.js
+++ b/html/tower/js/renderer.js
@@ -98,14 +98,37 @@ function renderEnemies(ctx, enemies) {
 }
 
 function renderUI(ctx, gameState) {
+    const padding = 20;
+    const lineHeight = 30;
+    const startY = padding;
+    const width = 200;
+    const height = lineHeight * 5;
+    
+    // Save the current canvas state
+    ctx.save();
+    
+    // Reset any transformations
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    
+    // Draw semi-transparent background
+    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+    ctx.fillRect(0, 0, width, height + padding);
+    
+    // Set text properties
     ctx.fillStyle = 'black';
     ctx.font = '20px Arial';
-    ctx.fillText(`Currency: $${gameState.currency}`, 10, 30);
-    ctx.fillText(`Phase: ${gameState.phase}`, 10, 60);
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'top';  // Add this to ensure consistent vertical alignment
+    
+    // Draw UI elements
+    ctx.fillText(`Level: ${gameState.level}`, padding, startY);
+    ctx.fillText(`Currency: $${gameState.currency}`, padding, startY + lineHeight);
+    ctx.fillText(`Phase: ${gameState.phase}`, padding, startY + lineHeight * 2);
+    ctx.fillText(`Destroyed: ${gameState.enemiesDestroyed}`, padding, startY + lineHeight * 3);
+    ctx.fillText(`Escaped: ${gameState.enemiesEscaped}`, padding, startY + lineHeight * 4);
     
-    // Add enemy stats
-    ctx.fillText(`Destroyed: ${gameState.enemiesDestroyed}`, 10, 90);
-    ctx.fillText(`Escaped: ${gameState.enemiesEscaped}`, 10, 120);
+    // Restore the canvas state
+    ctx.restore();
 }
 
 function renderTowers(ctx, towers) {