Animation canvas

Bonjour,

Je suis en train de créer une animation en canvas:

<canvas id="can" width="800" height="500" style="border:solid;"></canvas>

var canvas = document.getElementById('can');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'orange';
ctx.strokeStyle = 'orange';

function draw() 
{
	ctx.clearRect(0, 0, 800, 500); // j'efface le canvas
	ctx.save();//sauvegarde le canvas effacé
	var time = new Date();
	var n=time.getMilliseconds()/10//pour avancer sur x
	var t=Math.sin((Math.PI/250)*time.getMilliseconds());//pour bouger sur y selon une sinusoidale
	ctx.translate(00,200);//je part environ de la moitié du canvas en y
	ctx.translate(12*n,100*t);//position de mon point
	ctx.fillRect(0, 0, 15, 15);//je trace mon point
	ctx.restore();//je reviens à mon canvas effacé
}

setInterval(draw,10);

Cette animation met, évidemment , 1 seconde à parcourir l’intégralité du canvas. Comment faire pour la ralentir, et mettre 5 secondes?

Merci pour ta réponse!

J'ai finalement changé mon code, en appelant la fonction dans une boucle dans laquelle j'ai mis un timeout. Ça permet également d’arrêter la fonction après x temps.

Le voila pour ceux que ça pourrait intéresser:

function draw(i) 
{
	
	ctx.clearRect(0, 0, 800, 500); // j'efface le canvas
	ctx.save();//sauvegarde le canvas efface
	var t=Math.sin((Math.PI/100)*i);//pour bouger sur y selon une sinusoidale
	ctx.translate(00,200);//je part environ de la moitié du canvas en y
	ctx.translate(i*2,100*t);//position de mon point
	ctx.fillRect(0, 0, 25, 25);//je trace mon point
	ctx.restore();//je reviens à mon canvas effacé
}

for(let i=0;i<360;i++)
{
	//affiche(i);
	setTimeout(function()
		{ 
			draw(i);
		},
		10*i );
}