Animation of a developing flag HTML5 Adobe Animate MovieClip

[interactiv HTML5 Canvas]

Right now, this is what the program animation of a flag waving in the wind looks like. But it works in this example for the entire Canvas.

////////////////////////////////////////

this.stop();
var r = this;
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

var simplex = new SimplexNoise();
var time = 0;

var img = new lib.flag();
r.body.addChild(img);
console.log(img);

// Function for applying wave distortion
function applyWaveDistortion() {
// Getting the image data
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;

// Creating a temporary array to store the changed pixels
const newData = new Uint8ClampedArray(data);

// Applying a distortion along the Y axis
for (let y = 0; y < canvas.height; y++) {
for (let x = 0; x < canvas.width; x++) {
// We get the noise value for the current position
var noiseValue = simplex.noise2D(x / 100, time / 100);

// Convert the noise value to a Y offset
var newY = Math.floor(y + noiseValue * 10); // Настройте амплитуду волны

// Checking the boundaries
if (newY >= 0 && newY < canvas.height) {
const srcIndex = (y * canvas.width + x) * 4;
const destIndex = (newY * canvas.width + x) * 4;

// Copying pixels to a new array
newData[destIndex] = data[srcIndex]; // Red
newData[destIndex + 1] = data[srcIndex + 1]; // Green
newData[destIndex + 2] = data[srcIndex + 2]; // Blue
newData[destIndex + 3] = data[srcIndex + 3]; // Alpha
}
}
}

// Updating the image on the canvas
ctx.putImageData(new ImageData(newData, canvas.width, canvas.height), 0, 0);

// Updating the time for animation
time += 4;
};

createjs.Ticker.framerate = 30;
createjs.Ticker.addEventListener("tick", applyWaveDistortion);

////////////////////////////////////////

The task is as follows. How do I make this animation work only with the MovieClip that is added to the r.body? 

Source code by link https://drive.google.com/file/d/1qCUYwDuCNDRWpUqLWpf4Wz_7xun_ENw3/view?usp=sharing
I couldn't attach it here.

I would appreciate any help in this matter.

[JoãoCésar]

Hi.

I think this is a good fit for a custom CreateJS filter.

Here is an example:
https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/glitch_effect

Regards,

JC

[interactiv HTML5 Canvas]

Thanks for the example, but it doesn't look at all like the effect of a developing flag. And I don't have enough experience to figure out your code.

[JoãoCésar]

The point here is not the effect itself, but the usage of a custom filter. If you use one, you can target a specific MovieClip instance instead of the whole canvas.

[interactiv HTML5 Canvas]

If I could set it up, I wouldn't write here. That's why I'm asking for help.

[interactiv HTML5 Canvas]

I'm sorry for the link, by accident.