lotio 1.1.54 → 1.1.55

package/browser/index.js

@@ -3,7 +3,7 @@
  * @module lotio
  */
 
-import { initLotio, createAnimation, renderFrameToCanvas, renderFrameRGBA, cleanup, registerFont, getVersion } from './wasm.js';
+import { initLotio, createAnimation, renderFrameToCanvas, renderFrameRGBA, cleanup, registerFont, getVersion, setDebugMode } from './wasm.js';
 
 /**
  * Animation states
@@ -75,6 +75,7 @@ export class Lotio extends EventEmitter {
      * @param {number} options.textPadding - Text padding factor (0.0-1.0, default: 0.97)
      * @param {string} options.textMeasurementMode - Text measurement mode: 'fast'|'accurate'|'pixel-perfect' (default: 'accurate')
      * @param {string} options.wasmPath - Path to lotio.wasm file (default: './lotio.wasm')
+     * @param {boolean} options.debug - Enable debug logging (default: false)
      */
     constructor(options = {}) {
         super();
@@ -86,6 +87,7 @@ export class Lotio extends EventEmitter {
         this._layerOverrides = options.layerOverrides || null;
         this._textPadding = options.textPadding !== undefined ? options.textPadding : 0.97;
         this._textMeasurementMode = options.textMeasurementMode || 'accurate';
+        this._debug = options.debug === true;
         this._state = State.STOPPED;
         this._wasmInitialized = false;
         this._animationInfo = null;
@@ -96,6 +98,19 @@ export class Lotio extends EventEmitter {
         this._startTime = 0;
         this._registeredFonts = new Set();
         
+        if (this._debug) {
+            console.log('[Lotio] Constructor called with options:', {
+                wasmPath: this._wasmPath,
+                fps: this._fps,
+                hasAnimation: !!this._animation,
+                hasLayerOverrides: !!this._layerOverrides,
+                textPadding: this._textPadding,
+                textMeasurementMode: this._textMeasurementMode,
+                fontsCount: this._fonts.length,
+                debug: this._debug
+            });
+        }
+        
         // Auto-initialize if animation is provided
         if (this._animation) {
             this._init().catch(error => {
@@ -111,14 +126,34 @@ export class Lotio extends EventEmitter {
      */
     async _init() {
         if (this._wasmInitialized) {
+            if (this._debug) {
+                console.log('[Lotio] WASM already initialized, skipping');
+            }
             return;
         }
 
+        let initStartTime;
+        if (this._debug) {
+            console.log('[Lotio] Initializing WASM module from:', this._wasmPath);
+            initStartTime = performance.now();
+            setDebugMode(true);
+        } else {
+            setDebugMode(false);
+        }
+
         try {
             await initLotio(this._wasmPath);
             this._wasmInitialized = true;
             
+            if (this._debug) {
+                const initEndTime = performance.now();
+                console.log(`[Lotio] WASM module initialized successfully in ${initStartTime ? (initEndTime - initStartTime).toFixed(2) : '?'}ms`);
+            }
+            
             // Register fonts
+            if (this._debug && this._fonts.length > 0) {
+                console.log(`[Lotio] Registering ${this._fonts.length} font(s)...`);
+            }
             for (const font of this._fonts) {
                 await this._registerFont(font.name, font.data);
             }
@@ -128,8 +163,14 @@ export class Lotio extends EventEmitter {
                 await this._loadAnimation();
             } else {
                 this._setState(State.LOADED);
+                if (this._debug) {
+                    console.log('[Lotio] No animation provided, state set to LOADED');
+                }
             }
         } catch (error) {
+            if (this._debug) {
+                console.error('[Lotio] Failed to initialize WASM:', error);
+            }
             this._setState(State.ERROR);
             this.emit('error', error, this);
             throw error;
@@ -142,6 +183,9 @@ export class Lotio extends EventEmitter {
      */
     async _registerFont(name, data) {
         if (this._registeredFonts.has(name)) {
+            if (this._debug) {
+                console.log(`[Lotio] Font "${name}" already registered, skipping`);
+            }
             return;
         }
         
@@ -149,8 +193,16 @@ export class Lotio extends EventEmitter {
             await this._init();
         }
         
+        if (this._debug) {
+            console.log(`[Lotio] Registering font "${name}" (${data.length} bytes)`);
+        }
+        
         registerFont(name, data);
         this._registeredFonts.add(name);
+        
+        if (this._debug) {
+            console.log(`[Lotio] Font "${name}" registered successfully`);
+        }
     }
 
     /**
@@ -162,6 +214,12 @@ export class Lotio extends EventEmitter {
             await this._init();
         }
 
+        let loadStartTime;
+        if (this._debug) {
+            console.log('[Lotio] Loading animation...');
+            loadStartTime = performance.now();
+        }
+
         try {
             const animationJson = typeof this._animation === 'string' 
                 ? this._animation 
@@ -173,6 +231,15 @@ export class Lotio extends EventEmitter {
                     : JSON.stringify(this._layerOverrides))
                 : null;
 
+            if (this._debug) {
+                const animSize = animationJson.length;
+                console.log(`[Lotio] Animation JSON size: ${animSize} bytes`);
+                if (layerOverridesJson) {
+                    console.log(`[Lotio] Layer overrides JSON size: ${layerOverridesJson.length} bytes`);
+                }
+                console.log(`[Lotio] Text padding: ${this._textPadding}, measurement mode: ${this._textMeasurementMode}`);
+            }
+
             this._animationInfo = createAnimation(
                 JSON.parse(animationJson),
                 layerOverridesJson ? JSON.parse(layerOverridesJson) : null,
@@ -180,11 +247,25 @@ export class Lotio extends EventEmitter {
                 this._textMeasurementMode
             );
 
+            if (this._debug) {
+                const loadEndTime = performance.now();
+                console.log(`[Lotio] Animation loaded successfully in ${loadStartTime ? (loadEndTime - loadStartTime).toFixed(2) : '?'}ms`);
+                console.log('[Lotio] Animation info:', {
+                    width: this._animationInfo.width,
+                    height: this._animationInfo.height,
+                    duration: this._animationInfo.duration,
+                    fps: this._animationInfo.fps
+                });
+            }
+
             this._currentTime = 0;
             this._currentFrame = 0;
             this._setState(State.LOADED);
             this.emit('loaded', this);
         } catch (error) {
+            if (this._debug) {
+                console.error('[Lotio] Failed to load animation:', error);
+            }
             this._setState(State.ERROR);
             this.emit('error', error, this);
             throw error;
@@ -200,6 +281,9 @@ export class Lotio extends EventEmitter {
         this._state = newState;
         
         if (oldState !== newState) {
+            if (this._debug) {
+                console.log(`[Lotio] State changed: ${oldState} -> ${newState}`);
+            }
             this.emit('statechange', newState, oldState, this);
         }
     }
@@ -210,6 +294,9 @@ export class Lotio extends EventEmitter {
      */
     _animate() {
         if (!this._isPlaying || !this._animationInfo) {
+            if (this._debug) {
+                console.warn('[Lotio] Animation loop called but not playing or no animation info');
+            }
             return;
         }
 
@@ -221,8 +308,15 @@ export class Lotio extends EventEmitter {
         this._currentTime = (elapsed * speedMultiplier) % this._animationInfo.duration;
         this._currentFrame = Math.floor(this._currentTime * animationFPS);
 
+        if (this._debug && this._currentFrame % Math.floor(animationFPS) === 0) {
+            console.log(`[Lotio] Frame ${this._currentFrame} at time ${this._currentTime.toFixed(3)}s (${(this._currentTime / this._animationInfo.duration * 100).toFixed(1)}%)`);
+        }
+
         // Check if animation ended
         if (this._currentTime >= this._animationInfo.duration) {
+            if (this._debug) {
+                console.log('[Lotio] Animation ended');
+            }
             this.stop();
             this.emit('end', this);
             return;
@@ -344,6 +438,9 @@ export class Lotio extends EventEmitter {
             throw new Error('Animation not loaded');
         }
 
+        const oldTime = this._currentTime;
+        const oldFrame = this._currentFrame;
+
         // Determine if input is frame number or time
         if (frameOrTime < 1) {
             // Likely a time value (0.0 - duration)
@@ -356,6 +453,10 @@ export class Lotio extends EventEmitter {
             this._currentTime = this._currentFrame / animationFPS;
         }
 
+        if (this._debug && (oldTime !== this._currentTime || oldFrame !== this._currentFrame)) {
+            console.log(`[Lotio] Seek: frame ${oldFrame} -> ${this._currentFrame}, time ${oldTime.toFixed(3)}s -> ${this._currentTime.toFixed(3)}s`);
+        }
+
         if (this._isPlaying) {
             this._startTime = performance.now() - (this._currentTime / (this._fps / (this._animationInfo.fps || 30)) * 1000);
         }
@@ -370,9 +471,17 @@ export class Lotio extends EventEmitter {
         }
 
         if (this._isPlaying) {
+            if (this._debug) {
+                console.log('[Lotio] Already playing, ignoring start() call');
+            }
             return this;
         }
 
+        if (this._debug) {
+            console.log('[Lotio] Starting animation...');
+            console.log(`[Lotio] Starting from frame ${this._currentFrame}, time ${this._currentTime.toFixed(3)}s`);
+        }
+
         this._isPlaying = true;
         this._setState(State.PLAYING);
         
@@ -380,6 +489,10 @@ export class Lotio extends EventEmitter {
         const speedMultiplier = this._fps / animationFPS;
         this._startTime = performance.now() - (this._currentTime / speedMultiplier * 1000);
         
+        if (this._debug) {
+            console.log(`[Lotio] Animation FPS: ${animationFPS}, Target FPS: ${this._fps}, Speed multiplier: ${speedMultiplier.toFixed(3)}`);
+        }
+        
         this.emit('start', this);
         this._animate();
         
@@ -388,9 +501,16 @@ export class Lotio extends EventEmitter {
 
     pause() {
         if (!this._isPlaying) {
+            if (this._debug) {
+                console.log('[Lotio] Not playing, ignoring pause() call');
+            }
             return this;
         }
 
+        if (this._debug) {
+            console.log(`[Lotio] Pausing at frame ${this._currentFrame}, time ${this._currentTime.toFixed(3)}s`);
+        }
+
         this._isPlaying = false;
         this._setState(State.PAUSED);
         
@@ -406,6 +526,10 @@ export class Lotio extends EventEmitter {
     stop() {
         const wasPlaying = this._isPlaying;
         
+        if (this._debug && wasPlaying) {
+            console.log(`[Lotio] Stopping animation (was at frame ${this._currentFrame}, time ${this._currentTime.toFixed(3)}s)`);
+        }
+        
         this.pause();
         this.seek(0);
         this._setState(State.STOPPED);
@@ -426,7 +550,20 @@ export class Lotio extends EventEmitter {
         if (!this._animationInfo) {
             throw new Error('Animation not loaded');
         }
+        
+        let renderStartTime;
+        if (this._debug) {
+            console.log(`[Lotio] Rendering frame ${this._currentFrame} (time ${this._currentTime.toFixed(3)}s) to canvas`);
+            renderStartTime = performance.now();
+        }
+        
         renderFrameToCanvas(canvas, this._currentTime, bgColor);
+        
+        if (this._debug) {
+            const renderEndTime = performance.now();
+            console.log(`[Lotio] Canvas rendered in ${renderStartTime ? (renderEndTime - renderStartTime).toFixed(2) : '?'}ms`);
+        }
+        
         return this;
     }
 
@@ -434,12 +571,21 @@ export class Lotio extends EventEmitter {
      * Cleanup resources
      */
     destroy() {
+        if (this._debug) {
+            console.log('[Lotio] Destroying instance...');
+        }
+        
         this.stop();
         cleanup();
         this._wasmInitialized = false;
         this._animationInfo = null;
         this._state = State.STOPPED;
         this.emit('destroy', this);
+        
+        if (this._debug) {
+            console.log('[Lotio] Instance destroyed');
+        }
+        
         return this;
     }
 }

package/browser/wasm.js

@@ -1,5 +1,10 @@
 // Load WASM module
 let Module = null;
+let DebugMode = false;
+
+export function setDebugMode(debug) {
+    DebugMode = debug === true;
+}
 
 export async function initLotio(wasmPath = './lotio.wasm', wasmBinary = null) {
     // Load Emscripten module using ESM import
@@ -74,7 +79,9 @@ export async function initLotio(wasmPath = './lotio.wasm', wasmBinary = null) {
         // HEAP arrays should be exported directly, but if not, try to create them
         // First check if they're already available
         if (Module.HEAP8 && Module.HEAP32 && Module.HEAPF32 && Module.HEAPU8) {
-            console.log('HEAP arrays already available');
+            if (DebugMode) {
+                console.log('[WASM] HEAP arrays already available');
+            }
         } else {
             // Try to find the memory buffer
             let memoryBuffer = null;
@@ -105,11 +112,15 @@ export async function initLotio(wasmPath = './lotio.wasm', wasmBinary = null) {
                 Module.HEAPU32 = new Uint32Array(memoryBuffer);
                 Module.HEAPF32 = new Float32Array(memoryBuffer);
                 Module.HEAPF64 = new Float64Array(memoryBuffer);
-                console.log('Created HEAP arrays from memory buffer');
+                if (DebugMode) {
+                    console.log('[WASM] Created HEAP arrays from memory buffer');
+                }
             }
         }
         
-        console.log('Module initialized successfully');
+        if (DebugMode) {
+            console.log('[WASM] Module initialized successfully');
+        }
         return true;
     } catch (error) {
         throw new Error(`Failed to load WASM module: ${error.message}`);
@@ -121,10 +132,21 @@ export function createAnimation(jsonData, layerOverrides = null, textPadding = 0
         throw new Error('WASM module not initialized. Call initLotio() first.');
     }
     
+    if (DebugMode) {
+        console.log('[WASM] createAnimation called');
+        console.log('[WASM] Parameters:', {
+            hasJsonData: !!jsonData,
+            jsonDataType: typeof jsonData,
+            hasLayerOverrides: !!layerOverrides,
+            textPadding,
+            textMeasurementMode
+        });
+    }
+    
     // Check if Module has the required functions
     if (!Module._malloc || !Module._free || !Module._lotio_init) {
-        console.error('Module object:', Module);
-        console.error('Available functions:', Object.keys(Module).filter(k => typeof Module[k] === 'function'));
+        console.error('[WASM] Module object:', Module);
+        console.error('[WASM] Available functions:', Object.keys(Module).filter(k => typeof Module[k] === 'function'));
         throw new Error('Module is not properly initialized. Missing _malloc, _free, or _lotio_init functions.');
     }
     
@@ -177,6 +199,13 @@ export function createAnimation(jsonData, layerOverrides = null, textPadding = 0
     const jsonStr = typeof jsonData === 'string' ? jsonData : JSON.stringify(jsonData);
     const layerOverridesStr = layerOverrides ? (typeof layerOverrides === 'string' ? layerOverrides : JSON.stringify(layerOverrides)) : null;
     
+    if (DebugMode) {
+        console.log(`[WASM] JSON string length: ${jsonStr.length} bytes`);
+        if (layerOverridesStr) {
+            console.log(`[WASM] Layer overrides string length: ${layerOverridesStr.length} bytes`);
+        }
+    }
+    
     // Convert textMeasurementMode string to integer (0=FAST, 1=ACCURATE, 2=PIXEL_PERFECT)
     const modeStr = String(textMeasurementMode).toLowerCase();
     let modeInt = 1; // Default to ACCURATE
@@ -188,11 +217,21 @@ export function createAnimation(jsonData, layerOverrides = null, textPadding = 0
         modeInt = 2;
     }
     
+    if (DebugMode) {
+        console.log(`[WASM] Text measurement mode: "${textMeasurementMode}" -> ${modeInt} (0=FAST, 1=ACCURATE, 2=PIXEL_PERFECT)`);
+        console.log(`[WASM] Text padding: ${textPadding}`);
+    }
+    
     // Allocate memory using exported _malloc
     const jsonPtr = Module._malloc(jsonStr.length + 1);
     if (!jsonPtr) {
         throw new Error('Failed to allocate memory for JSON data');
     }
+    
+    if (DebugMode) {
+        console.log(`[WASM] Allocated ${jsonStr.length + 1} bytes for JSON at pointer ${jsonPtr}`);
+    }
+    
     Module.stringToUTF8(jsonStr, jsonPtr, jsonStr.length + 1);
     
     let layerOverridesPtr = 0;
@@ -204,17 +243,34 @@ export function createAnimation(jsonData, layerOverrides = null, textPadding = 0
             throw new Error('Failed to allocate memory for layer overrides');
         }
         layerOverridesLen = layerOverridesStr.length;
+        if (DebugMode) {
+            console.log(`[WASM] Allocated ${layerOverridesStr.length + 1} bytes for layer overrides at pointer ${layerOverridesPtr}`);
+        }
         Module.stringToUTF8(layerOverridesStr, layerOverridesPtr, layerOverridesStr.length + 1);
     }
     
+    let initStartTime;
+    if (DebugMode) {
+        console.log('[WASM] Calling _lotio_init...');
+        initStartTime = performance.now();
+    }
+    
     const result = Module._lotio_init(jsonPtr, jsonStr.length, layerOverridesPtr, layerOverridesLen, textPadding, modeInt);
     
+    if (DebugMode) {
+        const initEndTime = performance.now();
+        console.log(`[WASM] _lotio_init returned: ${result} (${result === 0 ? 'success' : 'error'}) in ${initStartTime ? (initEndTime - initStartTime).toFixed(2) : '?'}ms`);
+    }
+    
     Module._free(jsonPtr);
     if (layerOverridesPtr) {
         Module._free(layerOverridesPtr);
     }
     
     if (result !== 0) {
+        if (DebugMode) {
+            console.error(`[WASM] Animation initialization failed with error code: ${result}`);
+        }
         throw new Error('Failed to initialize animation');
     }
     
@@ -224,6 +280,10 @@ export function createAnimation(jsonData, layerOverrides = null, textPadding = 0
     const durationPtr = Module._malloc(4);
     const fpsPtr = Module._malloc(4);
     
+    if (DebugMode) {
+        console.log('[WASM] Getting animation info...');
+    }
+    
     Module._lotio_get_info(widthPtr, heightPtr, durationPtr, fpsPtr);
     
     const info = {
@@ -233,6 +293,10 @@ export function createAnimation(jsonData, layerOverrides = null, textPadding = 0
         fps: Module.HEAPF32[fpsPtr / 4]
     };
     
+    if (DebugMode) {
+        console.log('[WASM] Animation info retrieved:', info);
+    }
+    
     Module._free(widthPtr);
     Module._free(heightPtr);
     Module._free(durationPtr);
@@ -246,6 +310,10 @@ export function renderFrameRGBA(time) {
         throw new Error('WASM module not initialized.');
     }
     
+    if (DebugMode) {
+        console.log(`[WASM] renderFrameRGBA called for time: ${time.toFixed(3)}s`);
+    }
+    
     // Ensure HEAP arrays are available - use same logic as createAnimation
     if (!Module.HEAP32 || !Module.HEAPU8) {
         let memoryBuffer = null;
@@ -283,8 +351,20 @@ export function renderFrameRGBA(time) {
     const bufferSize = width * height * 4; // RGBA
     const bufferPtr = Module._malloc(bufferSize);
     
+    let renderStartTime;
+    if (DebugMode) {
+        console.log(`[WASM] Allocated ${bufferSize} bytes (${width}x${height} RGBA) at pointer ${bufferPtr}`);
+        console.log(`[WASM] Calling _lotio_render_frame...`);
+        renderStartTime = performance.now();
+    }
+    
     const result = Module._lotio_render_frame(time, bufferPtr, bufferSize);
     
+    if (DebugMode) {
+        const renderEndTime = performance.now();
+        console.log(`[WASM] _lotio_render_frame returned: ${result} (${result === 0 ? 'success' : 'error'}) in ${renderStartTime ? (renderEndTime - renderStartTime).toFixed(2) : '?'}ms`);
+    }
+    
     if (result !== 0) {
         Module._free(bufferPtr);
         const errorMsg = result === 1 ? 'Animation not initialized' :
@@ -295,6 +375,9 @@ export function renderFrameRGBA(time) {
                         result === 6 ? 'Failed to create conversion surface' :
                         result === 7 ? 'Failed to create converted image' :
                         `Unknown error: ${result}`;
+        if (DebugMode) {
+            console.error(`[WASM] Render error: ${errorMsg} (code ${result})`);
+        }
         throw new Error(`Failed to render frame: ${errorMsg} (code ${result})`);
     }
     
@@ -305,32 +388,64 @@ export function renderFrameRGBA(time) {
     const rgba = new Uint8Array(bufferView);
     
     // Debug: Check if we got any non-zero pixels
-    let nonZeroPixels = 0;
-    let maxValue = 0;
-    for (let i = 0; i < Math.min(rgba.length, 1000); i++) {
-        if (rgba[i] !== 0) {
-            nonZeroPixels++;
-            maxValue = Math.max(maxValue, rgba[i]);
+    if (DebugMode) {
+        let nonZeroPixels = 0;
+        let maxValue = 0;
+        for (let i = 0; i < Math.min(rgba.length, 1000); i++) {
+            if (rgba[i] !== 0) {
+                nonZeroPixels++;
+                maxValue = Math.max(maxValue, rgba[i]);
+            }
+        }
+        
+        // Sample a few pixels from the center
+        const centerX = Math.floor(width / 2);
+        const centerY = Math.floor(height / 2);
+        const centerIdx = (centerY * width + centerX) * 4;
+        const centerPixel = centerIdx < rgba.length ? [
+            rgba[centerIdx],
+            rgba[centerIdx + 1],
+            rgba[centerIdx + 2],
+            rgba[centerIdx + 3]
+        ] : [0, 0, 0, 0];
+        
+        // Sample corner pixels too
+        const topLeftPixel = [
+            rgba[0],
+            rgba[1],
+            rgba[2],
+            rgba[3]
+        ];
+        const bottomRightIdx = (height - 1) * width * 4 + (width - 1) * 4;
+        const bottomRightPixel = bottomRightIdx < rgba.length ? [
+            rgba[bottomRightIdx],
+            rgba[bottomRightIdx + 1],
+            rgba[bottomRightIdx + 2],
+            rgba[bottomRightIdx + 3]
+        ] : [0, 0, 0, 0];
+        
+        if (nonZeroPixels === 0) {
+            console.warn(`[WASM] Warning: All pixels are zero! Frame at time ${time} may be empty.`);
+            console.warn(`[WASM] Center pixel (${centerX}, ${centerY}): [${centerPixel.join(', ')}]`);
+            console.warn(`[WASM] Top-left pixel: [${topLeftPixel.join(', ')}]`);
+            console.warn(`[WASM] Bottom-right pixel: [${bottomRightPixel.join(', ')}]`);
+        } else {
+            console.log(`[WASM] Frame rendered at time ${time.toFixed(3)}s: ${nonZeroPixels} non-zero pixels found, max value: ${maxValue}`);
+            console.log(`[WASM] Center pixel (${centerX}, ${centerY}): [${centerPixel.join(', ')}]`);
+            console.log(`[WASM] Top-left pixel: [${topLeftPixel.join(', ')}]`);
+            console.log(`[WASM] Bottom-right pixel: [${bottomRightPixel.join(', ')}]`);
+            
+            // Check alpha channel distribution
+            let opaquePixels = 0;
+            let transparentPixels = 0;
+            let semiTransparentPixels = 0;
+            for (let i = 3; i < Math.min(rgba.length, 10000); i += 4) {
+                if (rgba[i] === 0) transparentPixels++;
+                else if (rgba[i] === 255) opaquePixels++;
+                else semiTransparentPixels++;
+            }
+            console.log(`[WASM] Alpha channel stats (first 10k pixels): opaque=${opaquePixels}, transparent=${transparentPixels}, semi-transparent=${semiTransparentPixels}`);
         }
-    }
-    
-    // Sample a few pixels from the center
-    const centerX = Math.floor(width / 2);
-    const centerY = Math.floor(height / 2);
-    const centerIdx = (centerY * width + centerX) * 4;
-    const centerPixel = centerIdx < rgba.length ? [
-        rgba[centerIdx],
-        rgba[centerIdx + 1],
-        rgba[centerIdx + 2],
-        rgba[centerIdx + 3]
-    ] : [0, 0, 0, 0];
-    
-    if (nonZeroPixels === 0) {
-        console.warn(`[WASM] Warning: All pixels are zero! Frame at time ${time} may be empty.`);
-        console.warn(`[WASM] Center pixel (${centerX}, ${centerY}): [${centerPixel.join(', ')}]`);
-    } else {
-        console.log(`[WASM] Frame rendered: ${nonZeroPixels} non-zero pixels found, max value: ${maxValue}`);
-        console.log(`[WASM] Center pixel (${centerX}, ${centerY}): [${centerPixel.join(', ')}]`);
     }
     
     Module._free(bufferPtr);
@@ -423,22 +538,27 @@ export function renderFrameToCanvas(canvas, time, bgColor = '#2a2a2a') {
     }
     
     // Debug: Check if imageData is being populated
-    const beforeSet = imageData.data[0];
-    imageData.data.set(rgba);
-    const afterSet = imageData.data[0];
-    
-    // Check a few sample pixels
-    const sampleIdx = Math.floor((height / 2) * width + width / 2) * 4;
-    const samplePixel = sampleIdx < imageData.data.length ? [
-        imageData.data[sampleIdx],
-        imageData.data[sampleIdx + 1],
-        imageData.data[sampleIdx + 2],
-        imageData.data[sampleIdx + 3]
-    ] : [0, 0, 0, 0];
-    
-    console.log(`[Canvas] Rendering frame at time ${time}, size: ${width}x${height}`);
-    console.log(`[Canvas] Sample pixel at center: [${samplePixel.join(', ')}]`);
-    console.log(`[Canvas] ImageData first byte before set: ${beforeSet}, after set: ${afterSet}`);
+    if (DebugMode) {
+        const beforeSet = imageData.data[0];
+        imageData.data.set(rgba);
+        const afterSet = imageData.data[0];
+        
+        // Check a few sample pixels
+        const sampleIdx = Math.floor((height / 2) * width + width / 2) * 4;
+        const samplePixel = sampleIdx < imageData.data.length ? [
+            imageData.data[sampleIdx],
+            imageData.data[sampleIdx + 1],
+            imageData.data[sampleIdx + 2],
+            imageData.data[sampleIdx + 3]
+        ] : [0, 0, 0, 0];
+        
+        console.log(`[Canvas] Rendering frame at time ${time.toFixed(3)}s, size: ${width}x${height}`);
+        console.log(`[Canvas] Sample pixel at center: [${samplePixel.join(', ')}]`);
+        console.log(`[Canvas] ImageData first byte before set: ${beforeSet}, after set: ${afterSet}`);
+        console.log(`[Canvas] Background color: ${bgColor}`);
+    } else {
+        imageData.data.set(rgba);
+    }
     
     // Create a temporary canvas to composite the image over the background
     // This ensures the background color shows through transparent areas
@@ -455,21 +575,28 @@ export function renderFrameToCanvas(canvas, time, bgColor = '#2a2a2a') {
     tempCtx.putImageData(imageData, 0, 0);
     
     // Debug: Check what's actually on the temp canvas
-    const tempImageData = tempCtx.getImageData(0, 0, width, height);
-    const tempSamplePixel = sampleIdx < tempImageData.data.length ? [
-        tempImageData.data[sampleIdx],
-        tempImageData.data[sampleIdx + 1],
-        tempImageData.data[sampleIdx + 2],
-        tempImageData.data[sampleIdx + 3]
-    ] : [0, 0, 0, 0];
-    console.log(`[Canvas] Temp canvas sample pixel: [${tempSamplePixel.join(', ')}]`);
+    if (DebugMode) {
+        const sampleIdx = Math.floor((height / 2) * width + width / 2) * 4;
+        const tempImageData = tempCtx.getImageData(0, 0, width, height);
+        const tempSamplePixel = sampleIdx < tempImageData.data.length ? [
+            tempImageData.data[sampleIdx],
+            tempImageData.data[sampleIdx + 1],
+            tempImageData.data[sampleIdx + 2],
+            tempImageData.data[sampleIdx + 3]
+        ] : [0, 0, 0, 0];
+        console.log(`[Canvas] Temp canvas sample pixel: [${tempSamplePixel.join(', ')}]`);
+    }
     
     // Draw the composited result to the main canvas
     ctx.drawImage(tempCanvas, 0, 0);
     
     // Final check: verify what's on the main canvas
-    const finalImageData = ctx.getImageData(0, 0, Math.min(width, 10), Math.min(height, 10));
-    console.log(`[Canvas] Final canvas first 10x10 pixels sample: [${Array.from(finalImageData.data.slice(0, 16)).join(', ')}]`);
+    if (DebugMode) {
+        const finalImageData = ctx.getImageData(0, 0, Math.min(width, 10), Math.min(height, 10));
+        console.log(`[Canvas] Final canvas first 10x10 pixels sample: [${Array.from(finalImageData.data.slice(0, 16)).join(', ')}]`);
+        console.log(`[Canvas] Canvas dimensions: ${canvas.width}x${canvas.height}`);
+        console.log(`[Canvas] Canvas context type: ${ctx.getContext ? '2d' : 'unknown'}`);
+    }
 }
 
 // Helper to render frame as ImageData

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lotio",
-  "version": "1.1.54",
+  "version": "1.1.55",
   "description": "High-performance Lottie animation frame renderer for the browser",
   "main": "browser/index.js",
   "module": "browser/index.js",