Custom parameters into canvas

[cDelage]

Hello everyone,

Is it possible to pass custom parameters in the Canvas function?

For example, I want to create a canvas animation with various images or texts, but I need to share this image from parameters and I can't.

Regards, Corentin.

[cDelage]

Hello everyone,

I have fork the project and add the possibility to share parameters from editly to canvas, The change is on this branch : https://github.com/cDelage/editly/tree/canvas-parameters the sources changed are : https://github.com/cDelage/editly/blob/canvas-parameters/sources/fabric.js, https://github.com/cDelage/editly/blob/canvas-parameters/sources/frameSource.js

and i add an example : https://github.com/cDelage/editly/blob/canvas-parameters/examples/customCanvasWithParameters.js

it seems to work but I don't have sufficient knowledge of the tool to measure the impacts...

But i think it's usefull, for example :

async function myFunc({ canvas }) {
    async function onRender(progress, canvasArgs, offsetTime) {
      const context = canvas.getContext('2d');    
      await loadImage(canvasArgs.url).then((image) => {
        context.drawImage( image, 0, 0, image.width, image.height, pos.x, pos.y, newSizes.width, newSizes.height)
      })
    }
    function onClose() {
      // Cleanup if you initialized anything
    }
    return { onRender, onClose };
  }

editly({
  outPath: './build/test.mp4',
  width: 1280,
  height: 720,
  clips: [
  outPath: './build/test.mp4',
  width: 1280,
  height: 720,
  clips: [
    { duration: 5,
      layers: [
        { type: 'canvas',
          func: myFunc , 
          //Any parameters to fill into canvas
          canvasArgs : {
          url : '../assets/image.jpg'
          }
        }
      ] },
    { duration: 5,
      layers: [
        { type: 'canvas',
          func: myFunc , 
          //Any parameters to fill into canvas
          canvasArgs : {
          url : '../assets/image2.jpg'
          }
        }
      ] },
  ],
}).catch(console.error);

Here I share an url of image into my canvas.

Regards, Corentin.

[totalgee]

Sorry to add a comment to a closed issue, but is there a similar mechanism to pass arguments to a fabric function in Editly? Thanks.

[totalgee]

Never mind, by experimenting I found I can indeed do it. I can just declare my func with a params argument like this, and then extract the argument I want from there:

async function func({ width, height, fabric, params }) {
  const { myArg } = params;
  ...

And when I call my custom fabric func, I just pass the custom argument as expected:

   ...,
  clips: [
    { duration: 20, layers: [{ type: 'fabric', func, myArg: 'hello' }] },
  ],
  ...