How to change the transparency of the canvas part?

Question

JavaScript

Hello. I place part of the image on canvase. At the same time, I want it not to be inserted immediately, but to appear gradually.

ctxBuildings.clearRect(build.x * tileWidth, build.y * tileHeight, 25, 25); // зачищаю место куда буду вставлять
ctxBuildings.globalAlpha = build.opacity; // изменяю на прозрачность 0.2 по умолчанию для каждого объекта build
ctxBuildings.drawImage(tiles, (build.type - 1) * tileWidth, tileWidth, tileWidth, tileWidth, build.x * tileWidth, build.y * tileHeight, 25, 25); // вставляю изображение
build.opacity += 0.1;
ctxBuildings.globalAlpha = 1; // меняю прозрачность на 1

And I do all this in a loop, with every second the transparency changes by 0.1 and there is an effect that the image gradually appears.
But if I do this with two images at the same time (I inserted one, then the other in another place), then the appearance of the first image stops, and the appearance of the second one starts not from 0.2, but from the moment where the first one stopped.
Is there any way to animate images on the same canvase so they go independently. Or how you can implement different transparency on the same canvas. Or what is the easiest way to make two images appear?
Thanks

Answer 1

or google, or here: https://professorweb.ru/my/html/html5/level4/4_2.php

Answer 2

Well , actually , I got a little carried away.