[Warden18]

Всем привет, собственно появилась проблема создать задержку при рисовании в цыкле. На данный момент пытаюсь сделать эффект волн по изображению через canvas, но самый простой без пиксельной графики. Проблема заключается в том чтобы круги при клике появлялись через какой то интервал времени, а не сразу все. Поскольку цыкл связан с событием то даже если использовать setTimeout() то теряются координаты клика мыши и надо заново кликать чтобы появился бОльший круг. Вот собственно код функции которая срабатывает при клике:


function circles(e) {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#000';
ctx.globalAlpha = 0.1;
for (var i=0; i<10; i++) {
ctx.beginPath();
ctx.arc(e.pageX, e.pageY, 10+10*i, 0, Math.PI*2, false);
ctx.stroke();
ctx.globalCompositeOperation = 'copy';
}
}

Заранее спасибо. Где уже только не искал. PS: Кстати алерт блочит рисовку следующего круга как мне нужно, не знаю только как это сделать с определённым интервалом.