littlejsengine 1.22.0 → 1.23.1

package/plugins/tweenSystem.js

@@ -593,45 +593,50 @@ function tweenUpdate(gameDelta, realDelta)
     const list = tweenUpdateList.length ? [] : tweenUpdateList, pass = ++tweenUpdatePass;
     for (const t of tweenActive)
         list.push(t);
-    for (let i = list.length; i--;)
+    // the list is let go however the walk ends: a callback that throws must not leave it held, or every
+    // update after would take it for an update still going and make a list of its own
+    try
     {
-        const t = list[i];
-        // stopped, or started again by a callback this update, or during an update a callback ran inside it, which
-        // counts on from this one
-        if (!t.active || t.activePass >= pass) continue;
-        let dt;
-        if (enginePath)
+        for (let i = list.length; i--;)
         {
-            // a paused tween keeps count too, so it does not jump when resumed
-            dt = t.useRealTime ? timeReal - t.lastTimeReal : time - t.lastTime;
-            t.lastTime = time;
-            t.lastTimeReal = timeReal;
-        }
-        else
-            dt = t.useRealTime ? realDelta : gameDelta;
-        if (t.target?.destroyed) { t.stop(); continue; } // its object is gone, paused or not
-        if (t.paused || dt <= 0) continue;
+            const t = list[i];
+            // stopped, or started again by a callback this update, or during an update a callback ran inside it, which
+            // counts on from this one
+            if (!t.active || t.activePass >= pass) continue;
+            let dt;
+            if (enginePath)
+            {
+                // a paused tween keeps count too, so it does not jump when resumed
+                dt = t.useRealTime ? timeReal - t.lastTimeReal : time - t.lastTime;
+                t.lastTime = time;
+                t.lastTimeReal = timeReal;
+            }
+            else
+                dt = t.useRealTime ? realDelta : gameDelta;
+            if (t.target?.destroyed) { t.stop(); continue; } // its object is gone, paused or not
+            if (t.paused || dt <= 0) continue;
 
-        t.life -= dt;
-        if (t.life > 1e-9) // the engine's deltas add up a rounding error short of the duration
-        {
-            t.callback(t.interp(t.life));
-        }
-        else
-        {
-            // Completion: fire end value, remove from active, start the next iteration
-            // of a loop or pingPong, or when there is none it has completed, fire onComplete
-            t.callback(t.interp(0));
-            if (!t.active || t.activePass >= pass)
-                continue; // stopped or restarted by its own callback, the run it was on ends without completing
-            tweenDeactivate(t);
-            const next = t.thenCallback;
-            t.thenCallback = undefined;
-            if (!(next && next()) && t.onComplete)
-                t.onComplete();
+            t.life -= dt;
+            if (t.life > 1e-9) // the engine's deltas add up a rounding error short of the duration
+            {
+                t.callback(t.interp(t.life));
+            }
+            else
+            {
+                // Completion: fire end value, remove from active, start the next iteration
+                // of a loop or pingPong, or when there is none it has completed, fire onComplete
+                t.callback(t.interp(0));
+                if (!t.active || t.activePass >= pass)
+                    continue; // stopped or restarted by its own callback, the run it was on ends without completing
+                tweenDeactivate(t);
+                const next = t.thenCallback;
+                t.thenCallback = undefined;
+                if (!(next && next()) && t.onComplete)
+                    t.onComplete();
+            }
         }
     }
-    list.length = 0;
+    finally { list.length = 0; }
 }
 
 /** Stop every active tween, ending loops too, without calling their then-callbacks.

package/plugins/uiSystem.js

@@ -615,8 +615,7 @@ class UISystemPlugin
         }
     }
 
-    /** Destroy and remove all objects
-    *  @memberof UISystem */
+    /** Destroy and remove all objects */
     destroyObjects()
     {
         for (const o of this.uiObjects)
@@ -1137,8 +1136,10 @@ class UIObject
                             return void inputClearKey(0, 0, false, true, false);
                     }
                 }
+                // the object that was the active one going into this update: one pressed and let go inside a
+                // frame is clicked on the next, with its release, not on both
                 if (!uiSystem.activateOnPress)
-                if (!mouseDown && this.isActiveObject() && this.interactive)
+                if (!mouseDown && isActive && this.isActiveObject() && this.interactive)
                     this.click();
                 if (this.destroyed) return;
             }
@@ -1881,7 +1882,10 @@ class UIVideo extends UIObject
         if (this.destroyed)
             return;
 
+        // let go of the media too, a paused video keeps what it has loaded
         this.video.pause();
+        this.video.removeAttribute?.('src');
+        this.video.load?.();
         this.video.remove();
         super.destroy();
     }

package/plugins/zzfxm.js

@@ -1,160 +1,162 @@
-/**
- * LittleJS ZzFXM Plugin
- * @namespace ZzFXM
- */
-
-'use strict';
-
-/**
- * Music Object - Stores a zzfx music track for later use
- * 
- * <a href=https://keithclark.github.io/ZzFXM/>Create music with the ZzFXM tracker.</a>
- * @extends Sound
- * @memberof ZzFXM
- * @example
- * // create some music
- * const music_example = new ZzFXMusic(
- * [
- *     [                         // instruments
- *       [,0,400]                // simple note
- *     ], 
- *     [                         // patterns
- *         [                     // pattern 1
- *             [                 // channel 0
- *                 0, -1,        // instrument 0, left speaker
- *                 1, 0, 9, 1    // channel notes
- *             ], 
- *             [                 // channel 1
- *                 0, 1,         // instrument 0, right speaker
- *                 0, 12, 17, -1 // channel notes
- *             ]
- *         ],
- *     ],
- *     [0, 0, 0, 0], // sequence, play pattern 0 four times
- *     90            // BPM
- * ]);
- * 
- * // play the music on a loop
- * music_example.playMusic();
- */
-class ZzFXMusic extends Sound
-{
-    /** Create a music object and cache the zzfx music samples for later use
-     *  @param {[Array, Array, Array, number?, ...any[]]} zzfxMusic - Array of zzfx music parameters: instruments, patterns, sequence, and an optional BPM; anything after it, like the tracker's metadata, is ignored
-     */
-    constructor(zzfxMusic)
-    {
-        super(undefined);
-
-        if (!soundEnable || headlessMode) return;
-        const [instruments, patterns, sequence, BPM] = zzfxMusic;
-        super.sampleChannels = zzfxM(instruments, patterns, sequence, BPM); // the setter, without declaring a field that hides it in the typings
-        this.buildSampleBuffer(); // hand the samples to an audio buffer now, like a zzfx sound, so the arrays are released
-        this.loadedPercent = 1; // generated in place, so it is loaded like a zzfx sound
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// ZzFX Music Renderer v2.0.3 by Keith Clark and Frank Force
-
-/** Generate samples for a ZzFM song with given parameters
- *  @param {Array} instruments - Array of ZzFX sound parameters
- *  @param {Array} patterns - Array of pattern data
- *  @param {Array} sequence - Array of pattern indexes
- *  @param {number} [BPM] - Playback speed of the song in BPM
- *  @return {Array} - Left and right channel sample data
- *  @memberof ZzFXM */
-function zzfxM(instruments, patterns, sequence, BPM = 125) 
-{
-  let i, j, k;
-  let instrumentParameters;
-  let note;
-  let sample;
-  let patternChannel;
-  let notFirstBeat;
-  let stop;
-  let instrument;
-  let attenuation;
-  let outSampleOffset;
-  let isSequenceEnd;
-  let sampleOffset = 0;
-  let nextSampleOffset;
-  let sampleBuffer = [];
-  let leftChannelBuffer = [];
-  let rightChannelBuffer = [];
-  let channelIndex = 0;
-  let panning = 0;
-  let hasMore = 1;
-  let sampleCache = {};
-  let beatLength = audioDefaultSampleRate / BPM * 60 >> 2;
-
-  // for each channel in order until there are no more
-  for (; hasMore; channelIndex++) {
-
-    // reset current values
-    sampleBuffer = [hasMore = notFirstBeat = outSampleOffset = 0];
-
-    // for each pattern in sequence
-    sequence.forEach((patternIndex, sequenceIndex)=> {
-      // get pattern for current channel, use empty 1 note pattern if none found
-      patternChannel = patterns[patternIndex][channelIndex] || [0, 0, 0];
-
-      // check if there are more channels
-      hasMore |= patterns[patternIndex][channelIndex]&&1;
-
-      // get next offset, use the length of first channel
-      nextSampleOffset = outSampleOffset + (patterns[patternIndex][0].length - 2 - (notFirstBeat?0:1)) * beatLength;
-      // for each beat in pattern, plus one extra if end of sequence
-      isSequenceEnd = sequenceIndex === sequence.length - 1;
-      for (i = 2, k = outSampleOffset; i < patternChannel.length + isSequenceEnd; notFirstBeat = ++i) {
-
-        // <channel-note>
-        note = patternChannel[i];
-
-        // stop if end, different instrument or new note
-        stop = i === patternChannel.length + isSequenceEnd - 1 && isSequenceEnd ||
-            instrument !== (patternChannel[0] || 0) || note | 0;
-
-        // fill buffer with samples for previous beat, most cpu intensive part
-        for (j = 0; j < beatLength && notFirstBeat;
-
-            // fade off attenuation at end of beat if stopping note, prevents clicking
-            j++ > beatLength - 99 && stop && attenuation < 1? attenuation += 1 / 99 : 0
-        ) {
-          // copy sample to stereo buffers with panning
-          sample = (1 - attenuation) * sampleBuffer[sampleOffset++] / 2 || 0;
-          leftChannelBuffer[k] = (leftChannelBuffer[k] || 0) - sample * panning + sample;
-          rightChannelBuffer[k] = (rightChannelBuffer[k++] || 0) + sample * panning + sample;
-        }
-
-        // set up for next note
-        if (note) {
-          // set attenuation
-          attenuation = note % 1;
-          panning = patternChannel[1] || 0;
-          if (note |= 0) {
-            // get cached sample
-            sampleBuffer = sampleCache[
-              [
-                instrument = patternChannel[sampleOffset = 0] || 0,
-                note
-              ]
-            ] = sampleCache[[instrument, note]] || (
-                // add sample to cache
-                instrumentParameters = [...instruments[instrument]],
-                instrumentParameters[2] = (instrumentParameters[2] || 220) * 2**(note / 12 - 1),
-
-                // allow negative values to stop notes
-                note > 0 ? zzfxG(...instrumentParameters) : []
-            );
-          }
-        }
-      }
-
-      // update the sample offset
-      outSampleOffset = nextSampleOffset;
-    });
-  }
-
-  return [leftChannelBuffer, rightChannelBuffer];
+/**
+ * LittleJS ZzFXM Plugin
+ * - A port of ZzFXM, the Zuper Zmall Zound Zynth music player, by Keith Clark and Frank Force, MIT licensed,
+ *   https://github.com/keithclark/ZzFXM; its notice is in COPYRIGHT.txt
+ * @namespace ZzFXM
+ */
+
+'use strict';
+
+/**
+ * Music Object - Stores a zzfx music track for later use
+ * 
+ * <a href=https://keithclark.github.io/ZzFXM/>Create music with the ZzFXM tracker.</a>
+ * @extends Sound
+ * @memberof ZzFXM
+ * @example
+ * // create some music
+ * const music_example = new ZzFXMusic(
+ * [
+ *     [                         // instruments
+ *       [,0,400]                // simple note
+ *     ], 
+ *     [                         // patterns
+ *         [                     // pattern 1
+ *             [                 // channel 0
+ *                 0, -1,        // instrument 0, left speaker
+ *                 1, 0, 9, 1    // channel notes
+ *             ], 
+ *             [                 // channel 1
+ *                 0, 1,         // instrument 0, right speaker
+ *                 0, 12, 17, -1 // channel notes
+ *             ]
+ *         ],
+ *     ],
+ *     [0, 0, 0, 0], // sequence, play pattern 0 four times
+ *     90            // BPM
+ * ]);
+ * 
+ * // play the music on a loop
+ * music_example.playMusic();
+ */
+class ZzFXMusic extends Sound
+{
+    /** Create a music object and cache the zzfx music samples for later use
+     *  @param {[Array, Array, Array, number?, ...any[]]} zzfxMusic - Array of zzfx music parameters: instruments, patterns, sequence, and an optional BPM; anything after it, like the tracker's metadata, is ignored
+     */
+    constructor(zzfxMusic)
+    {
+        super(undefined);
+
+        if (!soundEnable || headlessMode) return;
+        const [instruments, patterns, sequence, BPM] = zzfxMusic;
+        super.sampleChannels = zzfxM(instruments, patterns, sequence, BPM); // the setter, without declaring a field that hides it in the typings
+        this.buildSampleBuffer(); // hand the samples to an audio buffer now, like a zzfx sound, so the arrays are released
+        this.loadedPercent = 1; // generated in place, so it is loaded like a zzfx sound
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// ZzFX Music Renderer v2.0.3 by Keith Clark and Frank Force
+
+/** Generate samples for a ZzFM song with given parameters
+ *  @param {Array} instruments - Array of ZzFX sound parameters
+ *  @param {Array} patterns - Array of pattern data
+ *  @param {Array} sequence - Array of pattern indexes
+ *  @param {number} [BPM] - Playback speed of the song in BPM
+ *  @return {Array} - Left and right channel sample data
+ *  @memberof ZzFXM */
+function zzfxM(instruments, patterns, sequence, BPM = 125) 
+{
+  let i, j, k;
+  let instrumentParameters;
+  let note;
+  let sample;
+  let patternChannel;
+  let notFirstBeat;
+  let stop;
+  let instrument;
+  let attenuation;
+  let outSampleOffset;
+  let isSequenceEnd;
+  let sampleOffset = 0;
+  let nextSampleOffset;
+  let sampleBuffer = [];
+  let leftChannelBuffer = [];
+  let rightChannelBuffer = [];
+  let channelIndex = 0;
+  let panning = 0;
+  let hasMore = 1;
+  let sampleCache = {};
+  let beatLength = audioDefaultSampleRate / BPM * 60 >> 2;
+
+  // for each channel in order until there are no more
+  for (; hasMore; channelIndex++) {
+
+    // reset current values
+    sampleBuffer = [hasMore = notFirstBeat = outSampleOffset = 0];
+
+    // for each pattern in sequence
+    sequence.forEach((patternIndex, sequenceIndex)=> {
+      // get pattern for current channel, use empty 1 note pattern if none found
+      patternChannel = patterns[patternIndex][channelIndex] || [0, 0, 0];
+
+      // check if there are more channels
+      hasMore |= patterns[patternIndex][channelIndex]&&1;
+
+      // get next offset, use the length of first channel
+      nextSampleOffset = outSampleOffset + (patterns[patternIndex][0].length - 2 - (notFirstBeat?0:1)) * beatLength;
+      // for each beat in pattern, plus one extra if end of sequence
+      isSequenceEnd = sequenceIndex === sequence.length - 1;
+      for (i = 2, k = outSampleOffset; i < patternChannel.length + isSequenceEnd; notFirstBeat = ++i) {
+
+        // <channel-note>
+        note = patternChannel[i];
+
+        // stop if end, different instrument or new note
+        stop = i === patternChannel.length + isSequenceEnd - 1 && isSequenceEnd ||
+            instrument !== (patternChannel[0] || 0) || note | 0;
+
+        // fill buffer with samples for previous beat, most cpu intensive part
+        for (j = 0; j < beatLength && notFirstBeat;
+
+            // fade off attenuation at end of beat if stopping note, prevents clicking
+            j++ > beatLength - 99 && stop && attenuation < 1? attenuation += 1 / 99 : 0
+        ) {
+          // copy sample to stereo buffers with panning
+          sample = (1 - attenuation) * sampleBuffer[sampleOffset++] / 2 || 0;
+          leftChannelBuffer[k] = (leftChannelBuffer[k] || 0) - sample * panning + sample;
+          rightChannelBuffer[k] = (rightChannelBuffer[k++] || 0) + sample * panning + sample;
+        }
+
+        // set up for next note
+        if (note) {
+          // set attenuation
+          attenuation = note % 1;
+          panning = patternChannel[1] || 0;
+          if (note |= 0) {
+            // get cached sample
+            sampleBuffer = sampleCache[
+              [
+                instrument = patternChannel[sampleOffset = 0] || 0,
+                note
+              ]
+            ] = sampleCache[[instrument, note]] || (
+                // add sample to cache
+                instrumentParameters = [...instruments[instrument]],
+                instrumentParameters[2] = (instrumentParameters[2] || 220) * 2**(note / 12 - 1),
+
+                // allow negative values to stop notes
+                note > 0 ? zzfxG(...instrumentParameters) : []
+            );
+          }
+        }
+      }
+
+      // update the sample offset
+      outSampleOffset = nextSampleOffset;
+    });
+  }
+
+  return [leftChannelBuffer, rightChannelBuffer];
 }

package/src/engine.js

@@ -32,7 +32,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.22.0';
+const engineVersion = '1.23.1';
 
 /** Frames per second to update
  *  @type {number}

package/src/engineAudio.js

@@ -222,7 +222,13 @@ class Sound
      */
     constructor(asset, randomness, range, taper=soundDefaultTaper, onloadCallback)
     {
-        if (!soundEnable || headlessMode) return;
+        if (!soundEnable || headlessMode)
+        {
+            // no sound is made: it counts as loaded, so a game that waits for its sounds goes on
+            this.loadedPercent = 1;
+            onloadCallback?.(this);
+            return;
+        }
         const rangeIsDefault = range === undefined;
         if (rangeIsDefault)
             range = soundDefaultRange;
@@ -233,10 +239,9 @@ class Sound
         ASSERT(isNumber(range), 'range must be a number');
         ASSERT(isNumber(taper), 'taper must be a number');
 
-        /** @property {number} - World space max range of sound */
         this.range = range;
         /** @property {boolean} - No range was given, so it got soundDefaultRange; played in 3D such a sound is heard
-         *  to render3D.soundDefaultRange instead, which is further */
+         *  to render3D.soundDefaultRange instead, which is further; setting range makes it false */
         this.rangeIsDefault = rangeIsDefault;
         /** @property {number} - At what percentage of range should it start tapering */
         this.taper = taper;
@@ -292,6 +297,15 @@ class Sound
         }
     }
 
+    /** World space max range of sound, 0 for no limit; a range that is set is the sound's own, in 3D too
+     *  @type {number} */
+    get range() { return this.rangeValue; }
+    set range(range)
+    {
+        this.rangeValue = range;
+        this.rangeIsDefault = false;
+    }
+
     /** Sample data for each channel
      *  Sounds keep their samples in an audio buffer, so reading this rebuilds
      *  the arrays from it and caches them. The copies are safe to hold onto,

package/src/engineBuild.mjs

@@ -6,7 +6,7 @@
  * - Produces TypeScript definition file (.d.ts)
  * - Includes plugin files in builds
  * - Validates code and checks for errors
- * - Outputs to dist/ folder
+ * - Outputs to dist/ folder, which is left as it was when a step fails
  */
 
 import fs from 'node:fs';
@@ -19,7 +19,9 @@ const __dirname = dirname(__filename);
 const ROOT_DIR = join(__dirname, '..');
 
 const ENGINE_NAME = 'littlejs';
-const BUILD_FOLDER = join(ROOT_DIR, 'dist');
+// built in a folder of its own and put in dist when all of it is there, so a step that fails leaves dist whole
+const OUTPUT_FOLDER = join(ROOT_DIR, 'dist');
+const BUILD_FOLDER = join(ROOT_DIR, 'dist.build');
 const SOURCE_FOLDER = join(ROOT_DIR, 'src');
 const PLUGIN_FOLDER = join(ROOT_DIR, 'plugins');
 const engineSourceFiles =
@@ -50,6 +52,7 @@ const enginePluginFiles =
     `${PLUGIN_FOLDER}/textureSheet.js`,
     `${PLUGIN_FOLDER}/tweenSystem.js`,
     `${PLUGIN_FOLDER}/sceneSystem.js`,
+    `${PLUGIN_FOLDER}/parallax.js`,
     `${PLUGIN_FOLDER}/pathFinder.js`,
     `${PLUGIN_FOLDER}/math3d.js`,
     `${PLUGIN_FOLDER}/render3d.js`,
@@ -103,6 +106,19 @@ catch (e) { handleError(e, 'Failed to create build folder!'); }
 // Build all versions
 await buildAll();
 
+try
+{
+    // every step is done: dist is given what was built, and loses what is no longer built
+    fs.mkdirSync(OUTPUT_FOLDER, { recursive: true });
+    const built = fs.readdirSync(BUILD_FOLDER);
+    for (const file of built)
+        fs.copyFileSync(join(BUILD_FOLDER, file), join(OUTPUT_FOLDER, file));
+    for (const file of fs.readdirSync(OUTPUT_FOLDER))
+        built.includes(file) || fs.rmSync(join(OUTPUT_FOLDER, file), { recursive: true, force: true });
+    fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });
+}
+catch (e) { handleError(e, 'Failed to put the build in dist!'); }
+
 console.log(`Engine built in ${((Date.now() - startTime)/1e3).toFixed(2)} seconds! ✨`);
 
 ///////////////////////////////////////////////////////////////////////////////

package/src/engineDraw.js

@@ -496,17 +496,29 @@ class SpriteAnimator
      *  @return {SpriteAnimation} */
     get clip() { return this.clips[this.name]; }
 
+    /** The clip showing now, once a clip that has ended has called its onEnd: the callback may switch clips, and a
+     *  read gives the clip it switched to, not the one that ended
+     *  @return {SpriteAnimation}
+     *  @ignore */
+    get settledClip()
+    {
+        // each clip's own isDone calls its onEnd once; a few switches in a row at most
+        for (let i = 4, clip; i-- && clip !== this.clip;)
+            (clip = this.clip).isDone;
+        return this.clip;
+    }
+
     /** The tile of the frame showing now
      *  @return {TileInfo} */
-    get tileInfo() { return this.clip.tileInfo; }
+    get tileInfo() { return this.settledClip.tileInfo; }
 
     /** The frame of the clip showing now
      *  @return {number} */
-    get frame() { return this.clip.frame; }
+    get frame() { return this.settledClip.frame; }
 
     /** True once the clip showing now is a play that has ended
      *  @return {boolean} */
-    get isDone() { return this.clip.isDone; }
+    get isDone() { return this.settledClip.isDone; }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -931,7 +943,7 @@ function drawRegularPoly(pos, size=vec2(1), sides=3, color=WHITE, lineWidth=0, l
     // build regular polygon points
     const points = [];
     const sizeX = size.x/2, sizeY = size.y/2;
-    for (let i=sides; i--;)
+    for (let i=sides; i-- > 0;) // a count that is not whole, or below zero, still ends
     {
         const a = (i/sides)*PI*2;
         points.push(vec2(sin(a)*sizeX, cos(a)*sizeY));
@@ -1042,7 +1054,7 @@ function drawEllipse(pos, size=vec2(1), color=WHITE, angle=0, lineWidth=0, lineC
         if (!ring)
         {
             const points = [];
-            for (let i=sides; i--;)
+            for (let i=sides; i-- > 0;)
             {
                 const a = (i/sides)*PI*2;
                 points.push(vec2(sin(a), cos(a)));
@@ -1142,7 +1154,7 @@ function drawEllipseGradient(pos, size=vec2(1), colorInner=WHITE, colorOuter=CLE
         const startA = (offset%sides)/sides*PI*2;
         const points = [rim(startA)];
         const colors = [outerInt];
-        for (let i=sides; i--;)
+        for (let i=sides; i-- > 0;)
         {
             const a = ((i+offset)%sides)/sides*PI*2;
             points.push(pos);
@@ -1565,7 +1577,8 @@ function isOnScreen(pos, size=0)
 function setAdditiveBlendMode(additive=true)
 {
     glAdditive = additive;
-    drawContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
+    if (drawContext) // none headless
+        drawContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
 }
 
 /** Set the Shader that 2D draws use from now on, none for the engine's own
@@ -1688,9 +1701,12 @@ function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
     }
     else
     {
-        // copy to offscreen canvas
-        workReadCanvas.width = sWidth;
-        workReadCanvas.height = sHeight;
+        // copy to offscreen canvas, sized again only when the size changes: setting a size remakes the canvas even
+        // to the same one, and a game's tinted tiles are mostly of one size
+        if (workReadCanvas.width !== sWidth || workReadCanvas.height !== sHeight)
+            workReadCanvas.width = sWidth, workReadCanvas.height = sHeight;
+        else
+            workReadContext.clearRect(0, 0, sWidth, sHeight);
         workReadContext.drawImage(image, sx|0, sy|0, sWidth, sHeight, 0, 0, sWidth, sHeight);
 
         // tint image using offscreen work context