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

Question

[MaxYenot]

Здравствуйте!
Пытаюсь сделать следующее: на 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() ?

Answer 1

[Владимир Проскурин]

У вас у последнего setTimeout параметр интервала зашел в фигурные скобки.

setTimeout(function(){ctx.clearRect(0,0,canvas.width,canvas.height), 5000})
// 5000 внутри функции, а должен быть как параметр, вот так
// нужно вот так
setTimeout(function(){ctx.clearRect(0,0,canvas.width,canvas.height); }, 5000)

Answer 2

[Vitaliy]

В последней строке опечатка, в setTimeout не передается второй параметр. В таких случаях дебаггер в помощь