var txt = new createjs.Text("", "15px Arial", "#111");
txt.text = "This wrapped multi-line text is rendered using the Text Object.\n\n";
txt.text += "Text is fairly limited in canvas and EaselJS. It's fine for simple labels, titles, and HUD elements. You are limited to a single style per Text object, and the text is not selectable, editable, or accessible.\n\n";
txt.text += "For more complicated text, you can use DOMElement to include HTML text in your display list. It's also worth taking a look at BitmapText for visually rich text for games or similar scenarios.\n\n";
txt.text += "Text line heights & bounds are approximated, but accurate enough for most uses (for example, the grey background on this text).";
txt.lineWidth = 550;
txt.lineHeight = 22;
txt.textBaseline = "top";
txt.textAlign = "left";
txt.y = 50;
txt.x = 50;
stage.addChild(txt);
// use getBounds to dynamically draw a background for our text: Rectangle(x, y, Breite, Höhe) x und y der linken oberen Ecke
var bounds = txt.getBounds();
var pad = 30; //innenrand, padding
// Hier wird ein Graphics Objekt erzeugt
//dann werden die Eigenschaften wie Füllung Linie etc zugewiesen
var g = new createjs.Graphics();
g.setStrokeStyle(1);
g.beginStroke("#000000");
g.beginLinearGradientFill(["#540","#FFF"], [0,1], 0, 20, 0, 320);
g.drawRect(txt.x - pad + bounds.x, txt.y - pad + bounds.y, bounds.width + pad * 2, bounds.height + pad * 2);
//Das Shape wird intialisiert und das Graphics Objekt in der Konstruktorfunktion
//zugewiesen. Shape(g)
var bg = new createjs.Shape(g);
this.addChildAt(bg, 0);