⚡ canvaspool and offscreen canvas

src/nodes/Canvas2d/Canvas2d.js

@@ -1,5 +1,6 @@
 import Node from '../Node';
 import {waitForMedia} from '../../utils';
+import {canvasPool2D} from '../../canvas/CanvasPool';
 
 export default class Canvas2d extends Node {
     constructor(name, inputDefinition, outputDefiniton, options) {
@@ -22,11 +23,9 @@ export default class Canvas2d extends Node {
             }, outputDefiniton),
             options
         );
-        this.__canvas = document.createElement('canvas');
     }
 
     destroy() {
-        this.__canvas = null;
         super.destroy();
     }
 
@@ -35,19 +34,44 @@ export default class Canvas2d extends Node {
         for (let name of Object.keys(this.in.variables)) {
             values[name] = await waitForMedia(this.in[name].value);
         }
-        const ctx = this.__canvas.getContext('2d');
-        if (this.__canvas.width > 0 && this.__canvas.height > 0) {
-            ctx.clearRect(0,0,this.__canvas.width, this.__canvas.height);
+
+        const canvas = canvasPool2D.createCanvas();
+        canvas.acquire();
+        const ctx = canvas.getContext('2d');
+        canvas.width = 1;
+        canvas.height = 1;
+        if (values.image && values.image.acquire) {
+            values.image.acquire();
         }
-        const result = await this.render(values, this.__canvas, ctx);
-        if (result instanceof ImageBitmap) {
-            this.__out.image.value = result;
-            if (this.out.width.value !== this.out.image.value.width) {
-                this.out.width.value = this.out.image.value.width;
-            }
-            if (this.out.height.value !== this.out.image.value.height) {
-                this.out.height.value = this.out.image.value.height;
-            }
+
+        const lastResult = this.__out.image.value;
+        try {
+            const result = await this.render(values, canvas, ctx);
+            this.out.image.value = result;
+            this.__updateOutputDimensions();
+        } catch (err) {
+            console.error('Error in render', err);
+            canvas.release();
+        }
+
+        if (values.image && values.image.release) {
+            values.image.release();
+        }
+
+        if (lastResult && lastResult.release) {
+            lastResult.release();
+        }
+    }
+
+    __updateOutputDimensions() {
+        if (!this.out.image.value) {
+            return;
+        }
+        if (this.out.width.value !== this.out.image.value.width) {
+            this.out.width.value = this.out.image.value.width;
+        }
+        if (this.out.height.value !== this.out.image.value.height) {
+            this.out.height.value = this.out.image.value.height;
         }
     }
 
@@ -57,7 +81,7 @@ export default class Canvas2d extends Node {
      * @param {any} values
      * @param {HTMLCanvasElement} canvas
      * @param {CanvasRenderingContext2D} ctx
-     * @returns {Promise<ImageBitmap|null>}
+     * @returns {Promise<HTMLCanvasElement|null>}
      */
     async render(values, canvas, ctx) {
         return null;

src/nodes/Canvas2d/Compose.js

@@ -145,6 +145,6 @@ export default class Compose extends Canvas2d {
             paintToCanvas(canvas, this.fg.image, this.fg);
         }
 
-        return await createImageBitmap(canvas);
+        return canvas;
     }
 }

src/nodes/Canvas2d/Fill.js

@@ -28,6 +28,6 @@ export default class Fill extends Canvas2d {
         canvas.height = height;
         ctx.fillStyle = color;
         ctx.fillRect(0, 0, width, height);
-        return await createImageBitmap(canvas);
+        return canvas;
     }
 }

src/nodes/Canvas2d/Resize.js

@@ -54,6 +54,6 @@ export default class Resize extends Canvas2d {
         newImage.left = (destWidth - newImage.width) / 2;
 
         paintToCanvas(canvas, media, newImage);
-        return await createImageBitmap(canvas);
+        return canvas;
     }
 }

src/nodes/Canvas2d/Text.js

@@ -68,6 +68,6 @@ export default class Resize extends Canvas2d {
         text.split('\\n').forEach((line, index) => {
             ctx.fillText(line, x, fontSize * (1 + index));
         });
-        return await createImageBitmap(canvas);
+        return canvas;
     }
 }