How to wrap text on image on canvas

Question

I can't get the text to wrap on top of the image. I changed the canvas size to fit long text, but the result isn't what I'm looking for.

var stage = new Kinetic.Stage({
    container: 'container',
    width: 300,
    height: 300
});
var layer = new Kinetic.Layer();
stage.add(layer);

var image = new Image();
image.onload = function () {

    var image1 = new Kinetic.Image({
        x: 0,
        y: 0,
        width: 300,
        height: 300,
        image: image,
    });
    layer.add(image1);

    layer.draw();

}
image.crossOrigin = "anonymous";
image.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";

$("#save").click(function () {
    stage.toDataURL({
        callback: function (dataUrl) {
            var img = new Image();
            img.onload = function () {
                $("body").append("<p>Right-click the image below & then 'save-as'</p>");
                document.body.appendChild(img);
            }
            img.src = dataUrl;
            //          window.open(dataUrl);
        }
    });
});

$("#addbutton").click(function () {

    // simple label
    var label = new Kinetic.Label({
        x: 20,
        y: 20,
        draggable: true
    });

    label.add(new Kinetic.Tag({
        fill: 'green'
    }));

    label.add(new Kinetic.Text({
        text: $("#newtext").val(),
        fontFamily: 'Verdana',
        fontSize: 18,
        padding: 10,
        fill: 'white'
    }));

    layer.add(label);

    layer.draw();

});

Answer 1

Try adding a width property in the constructor for the Text shape, in this case since the image has a width of 300 it would be the following:

label.add(new Kinetic.Text({
    text: $("#newtext").val(),
    fontFamily: 'Verdana',
    width: 300,
    fontSize: 18,
    padding: 10,
    fill: 'white'
}));

And a working example: http://jsfiddle.net/CLk3Y/1/