Javascript画布：在图片上绘制

我在画布上画画时遇到了问题。我希望用户能够更改画布上的背景，我最终希望能够在输入框中键入一些内容，然后它将以方框的形式出现在画布上。在他们选择了一个背景（效果很好）之后，我一直试图在屏幕上显示更多内容，但当我试图添加一个简单的框时，我就做不到了。我一直在尝试在代码的不同部分执行此操作，但对我来说不起作用，也没有找到解决方案

所以我想问的是，你有没有一个具体的方法来做到这一点 一个图像（选择一个选择标签，我已经有工作），并能够绘制一个框上的图像选择。希望有人能向我解释我将如何做到这一点

function load(){
  draw()
}

//Canvas change background
function draw(){
  changeBackground("assets/images/1.jpg");
}


function changeBackground(imagePath){
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  var img=new Image();
  img.onload = function(){
        ctx.drawImage(img,0,0,954,507);
  };
  img.src=imagePath;
}


function background(){
  var imageN = document.getElementById("imageselector").value;
  console.log("Image picked as a Background: " + imageN)
  changeBackground("assets/images/" + imageN + ".jpg");
}

---

让这成为你的应用程序的好基础！ 快乐编码

const canvas=document.querySelector（“canvas”）；
const context=canvas.getContext（“2d”）；
const imageInput=document.querySelector（“#imageInput”）；
const textInput=document.querySelector（“#textInput”）；
常量imageUrl=https://i.picsum.photos/id/944/600/600.jpg';
imageInput.value=imageUrl；
常量状态={
图像：空，
文本：“”
}
常量宽度=window.innerWidth；
常数高度=窗内高度；；
画布宽度=宽度；
canvas.height=高度；
textInput.addEventListener（“keydown”，（{key}）=>{
常量值=textInput.value；
如果（键==“退格”）{
state.text=value.substring（0，value.length-1）；
}
否则{
state.text=值+键；
}
render（）；
})
imageInput.addEventListener（“输入”，（）=>{
getImage（imageInput.value）
。然后（图像=>{
state.image=图像；
render（）；
})
})
常量渲染=（）=>{
清除（）；
牵引地面（状态图像）；
drawText（state.text）；
}
常量drawText=（文本）=>{
context.font=“40px漫画SAN”；
context.fillStyle=“白色”；
const textmasure=context.measureText（文本）；
context.fillText（text，width/2-textmasure.width/2，height/5）；
}
常数清除=（）=>{
context.fillStyle=“白色”；
fillRect（0，0，宽度，高度）；
}
const getImage=（imagePath）=>新承诺（（解析、拒绝）=>{
常量图像=新图像（）；
image.onload=函数（）{
解析（图像）；
};
image.src=imagePath；
})
常量牵引地面=（图像）=>{
drawImage（图像，0，0，宽度，高度）；
}
getImage（imageInput.value）
。然后（图像=>{
state.image=图像；
render（）；
})

html，正文{
保证金：0；
身高：100%；
框大小：边框框；
}
#盒子{
显示器：flex；
证明内容：中心；
对齐项目：居中；
身高：100%；
}
#包装纸{
背景：白色；
}
#文本输入，#图像输入{
宽度：300px；
填充：1rem；
背景：透明；
边界：无；
}
#帆布{
位置：绝对位置；
z指数：-1；
}

我只是不得不延迟文本和框，然后它就工作了：）

嗨！你已经看过FabricJs了吗？这可能会帮助你实现你想要实现的目标：@AlgefAlmocera不，我没有。但我一直在试图避免使用库，因为我想用我现有的来尝试：）您可以使用以下示例：