添加背景图片&可拖动图像到HTML5画布

这是我的画布图像文本编辑器，我想添加一个背景图像和一个可以拖放的图像。我发现代码片段做这样的事情，但我的代码有点不工作。

代码

<style>canvas{width:450px; height:350px;}</style>
<canvas width="792" height="612"></canvas>
<a id="canvas-download" download="canvas-image.png" href="">Download</a>
<input type="file" id="bgload" name="bgload" />
<input type="file" id="logoload" name="logoload" />
<input id="title" value="[Certificate Title]"/>
<input id="present" value="[Presented to]" />
<input id="receiver" value="[Type Name Here]" />
<input id="awardDate" value="[Awarding Date]" />
<input id="signature" value="[Signature]" />
<script>
    $(function () {
        var cvs = $("canvas"),
                cvsWidth = 792,
                cvsHeight = 612,
                ctx = cvs[0].getContext("2d"),
                title = $("#title"),
                present = $("#present"),
                receiver = $("#receiver"),
                awardDate = $("#awardDate"),
                signature = $("#signature");
        function writeCaption(text, y, size, x) {
            var size = size;
            do {
                size--;
                ctx.font = size + 'px Georgia';
                ctx.lineWidth = size / 32;
            } while (ctx.measureText(text).width > cvsWidth)
            if (x == 0)
                ctx.fillText(text, cvsWidth / 2, y);
            else
                ctx.fillText(text, x, y);
            //ctx.strokeText(text, cvsWidth / 2, y);
        }
        // Setup basic canvas settings
        $.extend(ctx, {
            //strokeStyle: "#000000",
            textAlign: 'center',
            fillStyle: "#000",
            lineCap: "round"
        })
        $("<img />")
                .load(function () {
                    var img = this;
                    $(document.body).on("keyup", function () {
                        var titleText = title.val(),
                                presentText = present.val(),
                                signatureText = signature.val(),
                                awardDateText = awardDate.val(),
                                receiverText = receiver.val();
                        ctx.clearRect(0, 0, cvsWidth, cvsHeight);
                        ctx.drawImage(img, 0, 0, cvsWidth, cvsHeight);
                        //text alignments
                        ctx.textBaseline = 'top';
                        writeCaption(titleText, 150, 40, 0);
                        ctx.textBaseline = 'top';
                        writeCaption(presentText, 240, 20, 0);
                        ctx.textBaseline = 'top';
                        writeCaption(receiverText, 270, 30, 0);
                        ctx.textBaseline = 'bottom';
                        writeCaption(awardDateText, 490, 20, 300);
                        ctx.textBaseline = 'bottom';
                        writeCaption(signatureText, 490, 20, cvsWidth - 300 + ctx.measureText(signatureText).width);
                    }).trigger("keyup");

                })
                .attr("src", "<?php echo _SITE_URL; ?>images/editor/Template1.jpg")
                .attr("id", "canvasimg");
        var download = document.getElementById('canvas-download');
        download.addEventListener('click', function () {
            var canvas = document.getElementById('cs_canvas');
            var data = canvas.toDataURL();
            download.href = data;
        }, false);
    });
</script>

下面是工作示例的jsfiddle链接。http://jsfiddle.net/57gfqsm3/7/

请帮