web项目里怎么对某图片动态加文字

<script>
var text="www.html5party.com"
function change(){
text=document.getElementById("text").value;
init();
}
function init(){
watermark('canvas','http://www.html5party.com/wp-content/uploads/2013/04/google-glasses-1.jpg',text);
}
    function watermark(id,imgsrc,txt) {
        canvas = document.getElementById(id);
        if (canvas.getContext){
            ctx = canvas.getContext('2d');
            var img1 = new Image();
            img1.src=imgsrc;
            img1.onload = function(){
                var imgWidth=img1.width;
                var imgHeight=img1.height;
                canvas.width= imgWidth;
                canvas.height=imgHeight;
                ctx.drawImage(img1,0,0);
                ctx.fillStyle    = 'rgba(0, 0, 0, 0.25)';
                ctx.font         = '30px sans-serif';
                ctx.fillText(txt, canvas.width-(txt.length*15),canvas.height-30);
                ctx.fillStyle    = 'rgba(255, 255, 255, 0.25)';
                ctx.fillText(txt, canvas.width-(txt.length*15)-2,canvas.height-32)
            }
        }
    }
</script>