⚡ postpone update to next microtask

src/nodes/Canvas2d/Canvas2d.js

@@ -12,6 +12,12 @@ export default class Canvas2d extends Node {
             Object.assign({
                 image: {
                     type: 'Image',
+                },
+                width: {
+                    type: 'Number',
+                },
+                height: {
+                    type: 'Number',
                 }
             }, outputDefiniton),
             options
@@ -19,7 +25,7 @@ export default class Canvas2d extends Node {
         this.__canvas = document.createElement('canvas');
     }
 
-    async __update() {
+    async _update() {
         const values = {};
         for (let name of Object.keys(this.in.variables)) {
             values[name] = await waitForMedia(this.in[name].value);
@@ -28,7 +34,12 @@ export default class Canvas2d extends Node {
         if (this.__canvas.width > 0 && this.__canvas.height > 0) {
             ctx.clearRect(0,0,this.__canvas.width, this.__canvas.height);
         }
-        await this.render(values, this.__canvas, ctx);
+        const result = await this.render(values, this.__canvas, ctx);
+        if (result instanceof ImageBitmap) {
+            this.__out.image.value = result;
+            this.out.width.value = this.out.image.value.width;
+            this.out.height.value = this.out.image.value.height;
+        }
     }
 
 
@@ -37,8 +48,9 @@ export default class Canvas2d extends Node {
      * @param {any} values
      * @param {HTMLCanvasElement} canvas
      * @param {CanvasRenderingContext2D} ctx
+     * @returns {Promise<ImageBitmap|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);
         }
 
-        this.__out.image.value = await createImageBitmap(canvas);
+        return await createImageBitmap(canvas);
     }
 }

src/nodes/Canvas2d/Fill.js

@@ -20,7 +20,7 @@ export default class Fill extends Canvas2d {
                 default: '#FFFFFF'
             }
         }, {});
-        this.__update();
+        this._update();
     }
 
     async render({color, width, height}, canvas, ctx) {
@@ -28,6 +28,6 @@ export default class Fill extends Canvas2d {
         canvas.height = height;
         ctx.fillStyle = color;
         ctx.fillRect(0, 0, width, height);
-        this.__out.image.value = await createImageBitmap(canvas);
+        return await createImageBitmap(canvas);
     }
 }

src/nodes/Canvas2d/ImageIdentity.js

@@ -20,7 +20,6 @@ export default class ImageIdentity extends Node {
         const dataUrl = canvas.toDataURL()
         const i = new Image();
         i.src = dataUrl;
-        await waitForMedia(i);
-        this.__out.image.value = i;
+        return await waitForMedia(i);
     }
 }

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);
-        this.__out.image.value = await createImageBitmap(canvas);
+        return await createImageBitmap(canvas);
     }
 }

src/nodes/Canvas2d/Text.js

@@ -54,7 +54,7 @@ export default class Resize extends Canvas2d {
                 ]
             }
         }, {});
-        this.__update();
+        this._update();
     }
 
     async render({font, fontSize, text, color, width, height, textAlign, fontStyle}, canvas, ctx) {
@@ -69,6 +69,6 @@ export default class Resize extends Canvas2d {
         text.split('\\n').forEach((line, index) => {
             ctx.fillText(line, x, fontSize * (1 + index));
         });
-        this.__out.image.value = await createImageBitmap(canvas);
+        return await createImageBitmap(canvas);
     }
 }