Javascript 如何在画布中将图像作为背景

我上传了一个图像到画布，并使其可移动和调整大小现在我想在用户调整图像后将其作为背景图像，以便我可以在其上写入文本并使文本可移动。 我应该怎么做才能使它成为背景图像？ 我已经编写了一个jquery脚本

    $("#continueToCanvas").click(function(){
    window.close();
    window.open("./canvas.html","new ","width=1000,height=600");

});
function canvasImage(){
    /*var x=document.getElementById('canvas');
    canvas=x.getContext('2d');
    var pic = new Image();
    pic.src=localStorage.getItem('imgData');
    pic.addEventListener("load",function(){canvas.drawImage(pic,0,0,x.width,x.height)},false);
}
window.addEventListener("load",canvasImage,false);*/

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;

var startX;
var startY;
var isDown = false;


var pi2 = Math.PI * 2;
var resizerRadius = 8;
var rr = resizerRadius * resizerRadius;
var draggingResizer = {
    x: 0,
    y: 0
};
var imageX = 50;
var imageY = 50;
var imageWidth, imageHeight, imageRight, imageBottom;
var draggingImage = false;
var startX;
var startY;



var img = new Image();
img.onload = function () {
    imageWidth = img.width;
    imageHeight = img.height;
    imageRight = imageX + imageWidth;
    imageBottom = imageY + imageHeight
    draw(true, false);
}
img.src = localStorage.getItem('imgData');


function draw(withAnchors, withBorders) {

    // clear the canvas
   var abc=document.getElementById("canvasTextInput").value;
   var f= document.getElementById("fnt").value + "px";
   ctx.font=f + " Georgia";

    ctx.clearRect(0, 0, canvas.width, canvas.height);

   ctx.fillText(abc,200,200);  
 // draw the image
    ctx.drawImage(img, 0, 0, img.width, img.height, imageX, imageY, imageWidth, imageHeight);

    // optionally draw the draggable anchors
    if (withAnchors) {
        drawDragAnchor(imageX, imageY);
        drawDragAnchor(imageRight, imageY);
        drawDragAnchor(imageRight, imageBottom);
        drawDragAnchor(imageX, imageBottom);
    }

    // optionally draw the connecting anchor lines
    if (withBorders) {
        ctx.beginPath();
        ctx.moveTo(imageX, imageY);
        ctx.lineTo(imageRight, imageY);
        ctx.lineTo(imageRight, imageBottom);
        ctx.lineTo(imageX, imageBottom);
        ctx.closePath();
        ctx.stroke();
    }

}

function drawDragAnchor(x, y) {
    ctx.beginPath();
    ctx.arc(x, y, resizerRadius, 0, pi2, false);
    ctx.closePath();
    ctx.fill();
}

function anchorHitTest(x, y) {

    var dx, dy;

    // top-left
    dx = x - imageX;
    dy = y - imageY;
    if (dx * dx + dy * dy <= rr) {
        return (0);
    }
    // top-right
    dx = x - imageRight;
    dy = y - imageY;
    if (dx * dx + dy * dy <= rr) {
        return (1);
    }
    // bottom-right
    dx = x - imageRight;
    dy = y - imageBottom;
    if (dx * dx + dy * dy <= rr) {
        return (2);
    }
    // bottom-left
    dx = x - imageX;
    dy = y - imageBottom;
    if (dx * dx + dy * dy <= rr) {
        return (3);
    }
    return (-1);

}


function hitImage(x, y) {
    return (x > imageX && x < imageX + imageWidth && y > imageY && y < imageY + imageHeight);
}


function handleMouseDown(e) {
    startX = parseInt(e.clientX - offsetX);
    startY = parseInt(e.clientY - offsetY);
    draggingResizer = anchorHitTest(startX, startY);
    draggingImage = draggingResizer < 0 && hitImage(startX, startY);
}

function handleMouseUp(e) {
    draggingResizer = -1;
    draggingImage = false;
    draw(true, false);
}

function handleMouseOut(e) {
    handleMouseUp(e);
}

function handleMouseMove(e) {

    if (draggingResizer > -1) {

        mouseX = parseInt(e.clientX - offsetX);
        mouseY = parseInt(e.clientY - offsetY);

        // resize the image
        switch (draggingResizer) {
            case 0:
                //top-left
                imageX = mouseX;
                imageWidth = imageRight - mouseX;
                imageY = mouseY;
                imageHeight = imageBottom - mouseY;
                break;
            case 1:
                //top-right
                imageY = mouseY;
                imageWidth = mouseX - imageX;
                imageHeight = imageBottom - mouseY;
                break;
            case 2:
                //bottom-right
                imageWidth = mouseX - imageX;
                imageHeight = mouseY - imageY;
                break;
            case 3:
                //bottom-left
                imageX = mouseX;
                imageWidth = imageRight - mouseX;
                imageHeight = mouseY - imageY;
                break;
        }

        if(imageWidth<25){imageWidth=25;}
        if(imageHeight<25){imageHeight=25;}

        // set the image right and bottom
        imageRight = imageX + imageWidth;
        imageBottom = imageY + imageHeight;

        // redraw the image with resizing anchors
        draw(true, true);

    } else if (draggingImage) {

        imageClick = false;

        mouseX = parseInt(e.clientX - offsetX);
        mouseY = parseInt(e.clientY - offsetY);

        // move the image by the amount of the latest drag
        var dx = mouseX - startX;
        var dy = mouseY - startY;
        imageX += dx;
        imageY += dy;
        imageRight += dx;
        imageBottom += dy;
        // reset the startXY for next time
        startX = mouseX;
        startY = mouseY;

        // redraw the image with border
        draw(false, true);

    }


}


$("#canvas").mousedown(function (e) {
    handleMouseDown(e);
});
$("#canvas").mousemove(function (e) {
    handleMouseMove(e);
});
$("#canvas").mouseup(function (e) {
    handleMouseUp(e);
});
$("#canvas").mouseout(function (e) {
    handleMouseOut(e);
});
}

window.addEventListener("load",canvasImage,false);

$（“#continueToCanvas”）。单击（函数（）{
window.close（）；
window.open（“./canvas.html”，“new”，“width=1000，height=600”）；
});
函数canvasImage（）{
/*var x=document.getElementById（'canvas'）；
canvas=x.getContext（'2d'）；
var pic=新图像（）；
pic.src=localStorage.getItem（'imgData'）；
pic.addEventListener（“load”，function（）{canvas.drawImage（pic，0,0，x.width，x.height）}，false）；
}
window.addEventListener（“加载”，canvasImage，false）*/
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var-startX；
var startY；
var isDown=假；
var pi2=Math.PI*2；
var resizerRadius=8；
var rr=resizerRadius*resizerRadius；
变量拖动器={
x:0,，
y:0
};
var-imageX=50；
var imageY=50；
变量imageWidth、imageHeight、imageRight、imageBottom；
var draggingImage=false；
var-startX；
var startY；
var img=新图像（）；
img.onload=函数（）{
imageWidth=img.width；
图像高度=图像高度；
imageRight=imageX+imageWidth；
imageBottom=imageY+imageHeight
画（真、假）；
}
img.src=localStorage.getItem（'imgData'）；
函数绘制（带锚定、带边框）{
//清理画布
var abc=document.getElementById（“CANPUT”）.value；
var f=document.getElementById（“fnt”）.value+px；
ctx.font=f+“格鲁吉亚”；
clearRect（0，0，canvas.width，canvas.height）；
ctx.fillText（美国广播公司，200200）；
//画图像
ctx.drawImage（img，0，0，img.width，img.height，imageX，imageY，imageWidth，imageHeight）；
//（可选）绘制可拖动的锚点
如果（带锚）{
drawDragAnchor（imageX，imageY）；
drawDragAnchor（imageRight，imageY）；
drawDragAnchor（图像右侧，图像底部）；
drawDragAnchor（imageX，imageBottom）；
}
//（可选）绘制连接锚定线
如果（带边框）{
ctx.beginPath（）；
ctx.moveTo（imageX，imageY）；
ctx.lineTo（imageRight，imageY）；
ctx.lineTo（图像右侧，图像底部）；
ctx.lineTo（imageX，imageBottom）；
ctx.closePath（）；
ctx.stroke（）；
}
}
函数drawDragAnchor（x，y）{
ctx.beginPath（）；
ctx.弧（x，y，resizerRadius，0，pi2，false）；
ctx.closePath（）；
ctx.fill（）；
}
功能测试（x，y）{
var-dx，dy；
//左上角
dx=x-图像x；
dy=y-imageY；
如果（dx*dx+dy*dy，请用您迄今为止尝试过的内容更新您的问题。
canvas.toDataURL（）
可以提供
背景图像：url（数据：图像/jpg…）
是，但首先我需要用户根据自己的需要调整图像