Gráfica con canvas

[japarisid]

Buenas,
Tengo una gráfica que genero con canvas que de momento se rellena con datos aleatorios y la actualizo cada segundo. Aquí la función que ejecuto cada x segundos:

Código:

function draw() {

    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
	
	var ancho = document.getElementById("canvas").width;
	var punto = ancho/(puntos_grafica-1);
	var alto = document.getElementById("canvas").height;	
	
	context.beginPath();
	context.moveTo(0, alto);
	
	var array = new Array(puntos_grafica-1);
	for (i=1;i<puntos_grafica;i++) {
		var aleatorio = Math.floor(Math.random()*101)
		array[i] = aleatorio;
	}
	
	var i
	for (i=1;i<puntos_grafica;i++) {
		context.lineTo(punto*i, alto-(array[i]));
	} 
	

	context.stroke();
	

}

Esta función la llamo con un setInterval cada x segundos para que pinte la gráfica, pero cada esos segundos la siguiente la pinta encima y así todo el rato.

Sé que parar borrarla se usa

Código:

clearRect(0, 0, ancho, alto);

Pero no sé donde ponerlo porque si lo pongo despues del context.stroke() no borra. Y si lo pongo antes, nunca llega a pintar.
¿Como lo hago para que cada x segundos borre lo que haya antes y la pinte con los nuevos datos?

Gracias.

[japarisid]

Lo he solucionado reasignando el ancho

Código:

canvas.width = canvas.width;

Funciona pero no sé si es la mejor manera