Inclure le contenu d'un fichier texte dans plusieurs pages de canvas

Bonjour.

Je prepare une page web dans laquelle j'inclus une page commentaires.

les utilisateur post leur message que je garde dans un fichier messages.txt

Pour lire les commentaires j'ai preparer, en cherchant sur le web, une presentation livre avec pages qui se tourne.

Je voudrai savoir comment je peux inclure dans les pages de ce livre les commentaires du fichier messages.txt en limitant a trois ou quatre commentaires par pages.

partie du html.

<div id="book">
			<canvas id="pageflip-canvas"></canvas>
			<div id="pages">
				<section>
					<div>
						<h2>TEMOIGNAGE</h2>
						
					</div>
				</section>

le js

(function(){
	
	// Dimensiones de todo el libro
	var BOOK_WIDTH = 830; // 830
	var BOOK_HEIGHT = 260; //260
	
	// Dimensiones de una pagina del libro
	var PAGE_WIDTH = 400; //400
	var PAGE_HEIGHT = 230; //230
	
	// Espacio vertical entre el borde superior del libro y los papeles
	var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2;
	
	// El tamaño del canvas es igual a las dimensiones del libro + este relleno
	var CANVAS_PADDING = 60;
	
	var page = 0;
	
	var canvas = document.getElementById( "pageflip-canvas" );
	var context = canvas.getContext( "2d" );
	
	var mouse = { x: 0, y: 0 };
	
	var flips = [];
	
	var book = document.getElementById( "book" );
	
	// Lista de todos los elementos de la página en el DOM
	var pages = book.getElementsByTagName( "section" );
	
	// Organice la profundidad de nuestras páginas y cree las definiciones de volteo
	for( var i = 0, len = pages.length; i < len; i++ ) {
		pages[i].style.zIndex = len - i;
		
		flips.push( {
			// Progreso actual del flip (izquierda -1 a derecha +1)
			progress: 1,
			// El valor objetivo hacia el que se avanza siempre
			target: 1,
			// El elemento DOM de la página relacionado con este cambio
			page: pages[i], 
			// Verdadero mientras se arrastra la página
			dragging: false
		} );
	}
	
	// Cambiar el tamaño del canvas para que coincida con el tamaño del libro
	canvas.width = BOOK_WIDTH + ( CANVAS_PADDING * 2 );
	canvas.height = BOOK_HEIGHT + ( CANVAS_PADDING * 2 );
	
	// Desplaza el canvas para que su relleno se distribuya uniformemente alrededor del libro.
	canvas.style.top = -CANVAS_PADDING + "px";
	canvas.style.left = -CANVAS_PADDING + "px";
	
	// Renderiza el paso de página 60 veces por segundo
	setInterval( render, 1000 / 60 );
	
	document.addEventListener( "mousemove", mouseMoveHandler, false );
	document.addEventListener( "mousedown", mouseDownHandler, false );
	document.addEventListener( "mouseup", mouseUpHandler, false );
	
	function mouseMoveHandler( event ) {
		// Desplace la posición del mouse para que la parte superior del lomo del libro sea 0,0
		mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH / 2 );
		mouse.y = event.clientY - book.offsetTop;
	}
	
	function mouseDownHandler( event ) {
		// Asegúrese de que el puntero del mouse esté dentro del libro
		if (Math.abs(mouse.x) < PAGE_WIDTH) {
			if (mouse.x < 0 && page - 1 >= 0) {
				// Estamos en el lado izquierdo, arrastre la página anterior
				flips[page - 1].dragging = true;
			}
			else if (mouse.x > 0 && page + 1 < flips.length) {
				// Estamos en el lado derecho, arrastre la página actual
				flips[page].dragging = true;
			}
		}
		
		// Evita la selección de texto
		event.preventDefault();
	}
	
	function mouseUpHandler( event ) {
		for( var i = 0; i < flips.length; i++ ) {
			// Si este giro fue arrastrado, anímelo a su destino.
			if( flips[i].dragging ) {
				// Averigüe a qué página debemos navegar
				if( mouse.x < 0 ) {
					flips[i].target = -1;
					page = Math.min( page + 1, flips.length );
				}
				else {
					flips[i].target = 1;
					page = Math.max( page - 1, 0 );
				}
			}
			
			flips[i].dragging = false;
		}
	}
	
	function render(){
		
		// Restablecer todos los píxeles en el canvas
		context.clearRect( 0, 0, canvas.width, canvas.height );
		
		for( var i = 0, len = flips.length; i < len; i++ ) {
			var flip = flips[i];
			
			if( flip.dragging ) {
				flip.target = Math.max( Math.min( mouse.x / PAGE_WIDTH, 1 ), -1 );
			}
			
			// Facilitar el progreso hacia el valor objetivo
			flip.progress += ( flip.target - flip.progress ) * 0.2;
			
			// Si la tapa se está arrastrando o está en algún lugar en el medio del libro, renderícela
			if( flip.dragging || Math.abs( flip.progress ) < 0.997 ) {
				drawFlip( flip );
			}
			
		}
		
	}
	
	function drawFlip( flip ) {
		// La fuerza del pliegue es más fuerte en el medio del libro.
		var strength = 1 - Math.abs( flip.progress );
		
		// Ancho del papel doblado
		var foldWidth = ( PAGE_WIDTH * 0.5 ) * ( 1 - flip.progress );
		
		// Posición X del papel doblado
		var foldX = PAGE_WIDTH * flip.progress + foldWidth;
		
		// Hasta qué punto la página debería tener una sangría vertical debido a la perspectiva
		var verticalOutdent = 20 * strength;
		
		// El ancho máximo de las sombras de los lados izquierdo y derecho
		var paperShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( 1 - flip.progress, 0.5 ), 0 );
		var rightShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( strength, 0.5 ), 0 );
		var leftShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( strength, 0.5 ), 0 );
		
		
		// Cambiar el ancho del elemento de la página para que coincida con la posición x del pliegue
		flip.page.style.width = Math.max(foldX, 0) + "px";
		
		context.save();
		context.translate( CANVAS_PADDING + ( BOOK_WIDTH / 2 ), PAGE_Y + CANVAS_PADDING );
		
		
		// Dibuja una sombra nítida en el lado izquierdo de la página.
		context.strokeStyle = 'rgba(0,0,0,'+(0.05 * strength)+')';
		context.lineWidth = 30 * strength;
		context.beginPath();
		context.moveTo(foldX - foldWidth, -verticalOutdent * 0.5);
		context.lineTo(foldX - foldWidth, PAGE_HEIGHT + (verticalOutdent * 0.5));
		context.stroke();
		
		
		// Sombra paralela del lado derecho
		var rightShadowGradient = context.createLinearGradient(foldX, 0, foldX + rightShadowWidth, 0);
		rightShadowGradient.addColorStop(0, 'rgba(0,0,0,'+(strength*0.2)+')');
		rightShadowGradient.addColorStop(0.8, 'rgba(0,0,0,0.0)');
		
		context.fillStyle = rightShadowGradient;
		context.beginPath();
		context.moveTo(foldX, 0);
		context.lineTo(foldX + rightShadowWidth, 0);
		context.lineTo(foldX + rightShadowWidth, PAGE_HEIGHT);
		context.lineTo(foldX, PAGE_HEIGHT);
		context.fill();
		
		
		// Sombra paralela del lado izquierdo
		var leftShadowGradient = context.createLinearGradient(foldX - foldWidth - leftShadowWidth, 0, foldX - foldWidth, 0);
		leftShadowGradient.addColorStop(0, 'rgba(0,0,0,0.0)');
		leftShadowGradient.addColorStop(1, 'rgba(0,0,0,'+(strength*0.15)+')');
		
		context.fillStyle = leftShadowGradient;
		context.beginPath();
		context.moveTo(foldX - foldWidth - leftShadowWidth, 0);
		context.lineTo(foldX - foldWidth, 0);
		context.lineTo(foldX - foldWidth, PAGE_HEIGHT);
		context.lineTo(foldX - foldWidth - leftShadowWidth, PAGE_HEIGHT);
		context.fill();
		
		
		
		// Degradado aplicado al papel doblado (luces y sombras)
		var foldGradient = context.createLinearGradient(foldX - paperShadowWidth, 0, foldX, 0);
		foldGradient.addColorStop(0.35, '#fafafa');
		foldGradient.addColorStop(0.73, '#eeeeee');
		foldGradient.addColorStop(0.9, '#fafafa');
		foldGradient.addColorStop(1.0, '#e2e2e2');
		
		context.fillStyle = foldGradient;
		context.strokeStyle = 'rgba(0,0,0,0.06)';
		context.lineWidth = 0.5;
		
		// Dibuja la hoja de papel doblada
		context.beginPath();
		context.moveTo(foldX, 0);
		context.lineTo(foldX, PAGE_HEIGHT);
		context.quadraticCurveTo(foldX, PAGE_HEIGHT + (verticalOutdent * 2), foldX - foldWidth, PAGE_HEIGHT + verticalOutdent);
		context.lineTo(foldX - foldWidth, -verticalOutdent);
		context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0);
		
		context.fill();
		context.stroke();
		
		
		context.restore();
	}
	
})();

Par avance merci pour votre aide