Почему два setTimeout срабатывают не один за другим?

Здравствуйте!
Пытаюсь сделать следующее: на canvas выводится слово, через секунду выводится его перевод, а через пять секунд canvas очищается

function explainMe(){
	var canvas = document.createElement("canvas"); // создаем canvas
		canvas.width = 200; // ширина
		canvas.height = 150; // высота
	document.body.appendChild(canvas); // прикрепляет canvas к body

	var ctx = canvas.getContext("2d"); 
		/*ctx.clearRect(0,0,canvas.width, canvas.height);*/
	ctx.fillText("invite", 10,10); // пишем незнакомое слово		 
	setTimeout(function(){ctx.fillText("приглашать. Invitation - приглашение", 10, 30);}, 1000); //через секунду выводим строку с объяснениями
	setTimeout(function(){ctx.clearRect(0,0,canvas.width,canvas.height), 5000}); // через 5 секунд очищаем canvas

}

Но почему-то получилось, что ctx.fillText("invite", 10,10) вообще не отобразился, через секунду появился перевод, и очищение canvas не произошло
Я, вероятно, какой-то принцип не понимаю, как браузер исполняет код, когда идёт setTimeout() ?