Fix clouds2d: create own canvas element

The 2D WebGL renderer now creates its own <canvas> overlay inside
the target element, instead of expecting the target to already be a
canvas. This fixes 'canvas.getContext is not a function' when the
target is a <div>.

background.html

@@ -324,7 +324,7 @@
 <body>
     <div id="vanta" style="background: #1c1b1f;"></div>
     <div id="debug-panel">
-        <div class="debug-title expanded" onclick="toggleDebugPanel()"><span>DEBUG - Palette: <span id="dbg-palette-name">Ash</span></span><span class="debug-title-toggle" id="debug-toggle-icon">▼</span></div>
+        <div class="debug-title expanded" onclick="toggleDebugPanel()">\n<span>DEBUG - Palette: <span id="dbg-palette-name">Ash</span></span><span class="debug-title-toggle" id="debug-toggle-icon">▼</span></div>
         <div id="debug-content" class="debug-content">
             <div class="debug-controls">
                 <select id="dbg-theme-select" class="debug-select" onchange="setDebugTheme(this.value)">
@@ -1659,7 +1659,11 @@ window.weatherThemes = {
         }
 
         function tick() {
-            updateClockAndEvents();
+            try {
+                updateClockAndEvents();
+            } catch (e) {
+                console.error('Tick error:', e);
+            }
             setTimeout(tick, 1000);
         }
 
@@ -1925,7 +1929,7 @@ window.weatherThemes = {
         // Fetch location label from lat/lon if available
         fetchLocationLabel();
         animate();
-        tick();
+        try { tick(); } catch (e) { console.error('Initial tick error:', e); }
 
         fetchWeather();
         setInterval(fetchWeather, 15 * 60 * 1000);