在 HTML5 中使用 Canvas Kinetic 绘制许多文本并进行编辑

当我点击卡片上的文本时，我希望能够像这个网站一样编辑文本：

http://www.vistaprint.com/vp/ns/studio3.aspx?pf_id=064&combo_id=120585&free_studio_gallery=true&referer=http%3a%2f%2fwww.vistaprint.com%2fvp%2fns%2fdefault.aspx%3fdr%3d1%26rd%3d1%26GNF%3d0%26GP%3d5%252f19%252f2012%2b12%253a36%253a37%2bAM%26GPS%3d2448654652%26GNF%3d1%26GPLSID%3d&rd=1

这是我的代码：

$(document).ready(function () {
    var Total_layers = 0;
    var Text = {};
    /*set up stage for drawing image*/
    var stage = new Kinetic.Stage({
        container: "container",
        width: 600,
        height: 400
    });
    // var Layer = {};
    /*create a layer object for placing text image over it and place it over the stage*/
    var layer = new Kinetic.Layer();
    //Layer[Total_layers]
    /*Text Property*/
    var New_Text = "Company Name";
    var Text_Font = "Arial";
    var Text_Color = "Black";
    var Text_Size = "30";
    var Text_Pos_X = 200;
    var Text_Pos_y = 100;
    var Selected_Text = new Kinetic.Text({});
    var current_layer = 0;
    // var text_selected = 1;
    /*Add event for them*/
    //var formElement = document.getElementById("New Text");
    // formElement.addEventListener('change', Text_Changed, false);
    var formElement = document.getElementById("selectFontSize");
    formElement.addEventListener('change', Text_Size_Changed, false);
    /*This Function will be Executed when the Size of the Text in consideration is changed*/
    function Text_Size_Changed(e) {
        var target = e.target;
        Text_Size = target.value;
        Text_Pos_X = 200; //Text[Total_layers].x;
        Text_Pos_Y = 100; //Text[Total_layers].y;
        //DeleteLayer(Total_layers);
        layer.remove(Selected_Text);
        Draw_text(Total_layers);
    }
    /*Function to swap the Kinetic Text object and get the selected Text object to The Top*/
    function swap_layers(Selected_text) {
        var temp = new Kinetic.Text({});
        for (var i = 1; i <= Total_layers; i++) {
            if (Text[i] == Selected_text) {
                temp = Text[i];
                Text[i] = Text[Total_layers];
                Text[Total_layers] = temp;
                break;
            }
        }
    }
    /*Add different Events to the Text objects once They are instantiated*/
    function add_events(dest_Text) {
        dest_Text.on("mouseover", function () {
            document.body.style.cursor = "pointer";
        });
        dest_Text.on("mouseout", function () {
            document.body.style.cursor = "default";
        });
        dest_Text.on("click", function () {
            $("#selectFontSize").change(function () {
                dest_Text.setFontSize($("#selectFontSize").val());
                layer.draw(); // vì gọi layer.draw nên tất cả text trong layer đó đều dc vẽ lại 
            });
            $("#selectFontFamily").change(function () {
                swap_layers(dest_Text);
                //dest_Text.setFontFamily($("#selectFontFamily").val());
                //layer.draw();
            });
        });
    }
    /*Draw the Text over the layer depening upon the Text_object_Number*/
    function Draw_text(Text_object_Number) {
        /*Set the Properties of the Topmost object that is been modified and which will be added to the layer*/
        Text[Text_object_Number] = new Kinetic.Text({
            x: Text_Pos_X,
            y: Text_Pos_Y,
            text: New_Text,
            fontSize: Text_Size,
            fontFamily: Text_Font,
            textFill: Text_Color,
            align: "center",
            verticalAlign: "middle",
            draggable: "true"
        });
        /*Adds all the Text objects onto the layer and adds the events to every Text object */
        //for (var i = 1; i <= Text_object_Number; i++) {
        layer.add(Text[Text_object_Number]);
        add_events(Text[Text_object_Number]);
        //}
        stage.add(layer);
    }
    $("#add_text").click(function () {
        Total_layers++;
        Text[Total_layers] = new Kinetic.Text({
            x: Text_Pos_X,
            y: Text_Pos_y,
            text: New_Text,
            fontSize: 30,
            fontFamily: Text_Font,
            textFill: Text_Color,
            align: "center",
            verticalAlign: "middle",
            draggable: "true"
        });
        add_events(Text[Total_layers]);
        layer.add(Text[Total_layers]);
        stage.add(layer);
    });
    /*Adding an image to the present Context*/
    var imageObj = new Image();
    //alert("abc");
    imageObj.onload = function () {
        var T_shirt = new Kinetic.Image({
            x: 60,
            y: 0,
            image: imageObj,
            width: 550,
            height: 400,
            name: "image"
        });
        layer.add(T_shirt);
        stage.add(layer);
    }
    imageObj.src = "../../Content/Image/imagepreview1.jpg";
});

我已经尝试了很多方法，但我仍然无法解决这个问题。

如何通过在 html5 中使用 canvas kineticjs 来做到这一点？