Как лучше реализовать последовательный вывод изображений?

Question

[VelesIS]

Добрый день!
В php отрисовывается картинка. В js функция эту картинку получает и выводит в div на экране. Вывод должен быть пошаговым, через паузу. Например рисует иероглиф, сначала первая черта, потом вторая и т.д.
Затык в выводе картинок на экран через паузу, все остальное работает.
Подскажите, как можно это реализовать? Node.js и ассинхронные функции не рассматриваю.

Код упростил до рисования круга.

$data = json_decode(file_get_contents("php://input"), true);
$width = $data["width"];
$height = $data["height"];
$im = imagecreatetruecolor(400, 400);
$red = imagecolorallocate($im, 0xCC, 0x00, 0x00);
$white = imagecolorallocate($im, 0xFF, 0xFF, 0xFF);
imagefill($im, 1, 1, $white);
imageellipse($im, $width, $height, 80, 80, $red);
ob_start();
imagepng($im);
$imageData = ob_get_clean();
$imageData = base64_encode($imageData);
$result['image'] = $imageData;
header('Content-type: application/json');
echo json_encode($result);

function sendData(wid,hei) {
		var data = {
			width: wid,
			height: hei,
		};
		var xhr = new XMLHttpRequest();
		xhr.open("POST", "Drawing.php", true);
		xhr.setRequestHeader("Content-Type", "application/json");
		xhr.onreadystatechange = function () {				
                     if (xhr.readyState == 4 && xhr.status == 200) {
                        var result = JSON.parse(xhr.responseText);
                        var img = new Image();
                        img.src = "data:image/jpeg;base64," + result.image;
			$('#myImg').empty();
			document.getElementById("myImg").appendChild(img);
                    }
		};
		xhr.send(JSON.stringify(data));
	}

	$('#anim').click(function(){
		$('#myImg').empty();
		sendData(200,50);
                sendData(200,200);
                sendData(200,360);
       });

Вывод картинок по клику кнопки.

Пробовал использовать setTimeout(sendData, 2000, 200, 200) - происходит вывод сразу всех картинок в один момент после указанной паузы, по факту видна только последняя картинка.
Пробовал с использованием функции sleep:

function sleep(milliseconds) {
		const date = Date.now();
		var currentDate = null;
		do {
			currentDate = Date.now();
		} while (currentDate - date < milliseconds);
	}

- выводит первую картинку и через паузу все остальные сразу (по факту видна только последняя).
Как вообще можно реализовать такой вывод картинок через паузу? Или сначала помещать все картинки в массив, а потом выводить стандартно через animation?