Transform effect leaves a trail when using the image layer.

[keithudev]

When I want to use the transform effect, to make it move from one side to the other, it leaves a trail. The previous frame should be cleared when moving.

const cursorLayer = new etro.layer.Image({
	source: cursorImage,
	startTime: 0,
	duration: video.duration,
	destHeight: 32,
	destWidth: 22,
	x: (canvas.width - canvas.width / 1.1) / 2,
	y: (canvas.height - canvas.height / 1.1) / 2,
	width: canvas.width / 1.1,
	height: canvas.height / 1.1,
});

const cursorEffect = new etro.effect.Transform({
	matrix: new etro.KeyFrame(...cursorKeyframes),
})

cursorLayer.effects.push(cursorEffect);
movie.layers.push(cursorLayer);

[keithudev]

I have managed to make it work, creating a new effect that removes the previous frame, here is the code in case anyone is interested:

import etro from 'etro';

export interface TransformOptions {
  x: etro.Dynamic<number>;
  y: etro.Dynamic<number>;
}
export class Cursor extends etro.effect.Visual {
  x: etro.Dynamic<number>
  y: etro.Dynamic<number>

  constructor (options: TransformOptions) {
    super();

    this.x = options.x;
    this.y = options.y;
  }

  apply (target: any, reltime: number): void {
    const cctx = target.cctx;
    const canvas = target.canvas;
    const x = etro.val(this, 'x', reltime)
    const y = etro.val(this, 'y', reltime)

    const tmpCanvas = document.createElement('canvas');
    tmpCanvas.width = canvas.width;
    tmpCanvas.height = canvas.height;
    const tmpCtx = tmpCanvas.getContext('2d');


    tmpCtx?.drawImage(canvas, 0, 0, canvas.width, canvas.height);

    cctx.clearRect(0, 0, canvas.width, canvas.height);

    cctx.translate(x, y);

    cctx.drawImage(tmpCanvas, 0, 0);

    cctx.restore();
  }
}