fix: Resolve canvas reference and duplicate currentTool declaration

js/input.js

@@ -38,6 +38,7 @@ function setTool(tool) {
 }
 
 function handleMouseDown(e) {
+    const canvas = document.getElementById('simulation-canvas');
     const rect = canvas.getBoundingClientRect();
     const x = e.clientX - rect.left;
     const y = e.clientY - rect.top;
@@ -57,6 +58,7 @@ function handleMouseDown(e) {
 }
 
 function handleMouseMove(e) {
+    const canvas = document.getElementById('simulation-canvas');
     const rect = canvas.getBoundingClientRect();
     const x = e.clientX - rect.left;
     const y = e.clientY - rect.top;
@@ -154,6 +156,8 @@ function draw(x, y) {
 function handleTouchStart(e) {
     e.preventDefault();
     
+    const canvas = document.getElementById('simulation-canvas');
+    
     // Check if we have multiple touch points (for dragging)
     if (e.touches.length > 1) {
         isDragging = true;
@@ -176,6 +180,7 @@ function handleTouchStart(e) {
 function handleTouchMove(e) {
     e.preventDefault();
     
+    const canvas = document.getElementById('simulation-canvas');
     const rect = canvas.getBoundingClientRect();
     
     if (isDragging && e.touches.length > 1) {
@@ -203,6 +208,9 @@ function handleTouchMove(e) {
 
 // Set up event listeners
 window.addEventListener('load', function() {
+    // Get canvas reference after it's defined
+    const canvas = document.getElementById('simulation-canvas');
+    
     canvas.addEventListener('mousedown', handleMouseDown);
     canvas.addEventListener('mousemove', handleMouseMove);
     window.addEventListener('mouseup', handleMouseUp);

js/main.js

@@ -1,6 +1,6 @@
 // Main game variables and initialization
 let canvas, ctx;
-let currentTool = SAND;
+// currentTool is already defined in input.js
 let lastFrameTime = 0;
 let fps = 0;
 let debugMode = false;