HTML5/JS Canvas: draw multiline text in a rectangle

Déjà-vu! Kennt ihr das? Vor ca 2. Wochen brauchte ich ein Skript, was mir in Java bzw. Android diverse Texte in ein Viereck schreibt. Heute brauch ich das Ding in Javascript-.-„
Zum Glück hab ich was auf dem Kasten und kann das Skript portieren. Erstaunlicherweise ging das echt gut…
Es geht also wieder um Canvas, speziell wie man einen Text ein- oder mehrzeilig in ein Rechteck schreiben kann.

Javascript

Um was es geht ist hoffentlich klar. Ein x beliebiger Text muss in ein Viereck rein.

var canvas = document.getElementById("myCanvas");
	var context = canvas.getContext("2d");
	context.fillStyle = "#FF0000";

	// Text
	context.fillRect(300, 100, 200, 100);
	context.fillStyle = "#000000";
	context.font="20px Georgia";
	// errechnet sich aus der Font groesse + Padding!!!
	var lineHeight = 20 + 2;
	var text = "teststsllllllllllllllllllllllllllllllllllllllllllllllllllllllllggggggggggggggggggggggggglllllllfsjkfs sdf khg skghk sghsd g ";
	var maxWidth = 200; // siehe oben
	var maxHeight= 100; // siehe oben
	
	var maxZeilenAnz = Math.floor(maxHeight / lineHeight);
	
	var ergList = [];
	
	var zeiger = 0;
	for (var i = 0; i < maxZeilenAnz; i++) {
		var zeile = "";
		
		var zulang = false;
		while (!zulang && zeiger < text.length) {
			var tmpZzeile = zeile + text.charAt(zeiger);
			var lineHeightTmp =  context.measureText(tmpZzeile);
			if(lineHeightTmp.width > maxWidth){
				zulang = true;
				
				// falls es zu lang wird!
				if((i == (maxZeilenAnz - 1)) && zeile.length > 4){
					zeile = zeile.substring(0, zeile.length - 3) + "...";
				}else{
					// schauen ob ein Leerzeichen in der naehe ist
					var posLeerz = zeile.lastIndexOf(" ");
					if(posLeerz != -1 && (6 > (zeile.length - posLeerz))){
						
						zeiger = text.substring(0, zeiger).lastIndexOf(" ") + 1;
						zeile = zeile.substring(0, posLeerz);
					}
				}
			}else{
				zeile = tmpZzeile;
				zeiger++;
			}
		}
		if(zeile != ""){
			ergList.push(zeile);			
		}
		if(zeiger > text.length){
			break;
		}
	}
	
	// Achtung Y koordinate von oben!
	var tempY = 100 + lineHeight;
	for (var i = 0; i < ergList.length; i++) {
		var item = ergList[i];
		// Achtung x koordinate von oben!
		context.fillText(item ,300, tempY); 
		tempY = tempY + lineHeight;
	}
	

Das Ergebnis

Copyright © 2015 AxxG – Alexander Gräsel