Javascript 如何在画布上切换圆？

我试图确保当点击图像时，图像上会出现一个圆圈。但是，当我像现在这样尝试代码时，我无法看到下面代码生成的图像。我不知道该怎么修，也不知道该怎么办

编辑： 因此，我得到了图像和画布要附加到每个div。然而，我的每个图像，你点击将激活画布只在第一个图像。例如，如果单击图像2和图像3，图像1上将填充两个画布。删除这些画布的唯一方法是单击画布区域两次。每次应用于其他图像时，都会有一次。只有当

cnvs.style.position='absolute'时才会发生这种情况已启用。如果它被注释掉，画布将连接到图像的底部，而不是被覆盖


document.body.onload=addElement；
函数addElement（）{
var i=0；
//创建一个新的div元素
常量imagePath=；
//console.log（imagePath）；
for（图像路径的常量图像）{
变量id=`${image}`；
const img=document.createElement（“img”）；
img.src=`/check/assets/img/${image}`；
img.classList.add（“新”）；
const cnvs=document.createElement（“画布”）；
cnvs.classList.add（“SuiteCanvas”）；
cnvs.style.left=img.offsetLeft+“px”；
cnvs.style.top=img.offsetTop+“px”；
var ctx=cnvs.getContext（“2d”）；
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
ctx.arc（100,75,50,0,2*Math.PI，false）；
ctx.lineWidth=15；
ctx.strokeStyle='#FF0000'；
ctx.stroke（）；
var div=document.createElement（“div”）；
div.id=id；
div.classList.add（“图像”）；
linebreak=document.createElement（“br”）；
document.getElementById（'suitei-slider'）.appendChild（div）；
document.getElementById（image.appendChild（img）；
document.getElementById（image.appendChild（cnvs）；
cnvs.onclick=函数（）{
cnvs.style.display='none'；
hdnName.value=null；
};
img.onclick=函数（）{
cnvs.style.display=''；
hdnName.value=img.id；
};
}
}
canvas.suiteiCanvas{
高度：自动；
宽度：自动；
/*位置：绝对位置；
显示：“无”*/
最大高度：200px；
最大宽度：150px；
左边距：100px；
右边距：100px；
边框：3倍实心rgb（20,11,11）；
}
img.new{
高度：自动；
宽度：自动；
最大高度：200px；
最大宽度：150px；
左边距：100px；
右边距：100px；
边框：3倍实心rgb（20,11,11）；
}
您尝试

document.getElementById(image).apppendChild(cnvs);

并且，假设图像是
img
标记的
id
，这实际上意味着您试图将
canvas
附加为
img
的子项，这是无效的。如果您查看用作模型的代码，您可以看到它并没有将
画布
标记作为
img
标记的子项追加，而是在
画布
中显示图像。因此，问题在于，您在结构上试图将
画布
放在
img
中，而不是像模型代码那样在
画布
中绘制
img
。
@Barudar-问题中链接了它。但请不要要求非现场的例子，而是要求现场的例子（见上文）。链接的小提琴似乎有效吗？您没有定义画布，但是定义了CNV，所以请尝试
ctx.clearRect（0，0，cnvs.width，cnvs.height）。。。并在CNV上设置宽度/高度！浏览器控制台有错误吗？@Lajos谢谢你的提示！我成功了！然而，我的画布“被粘在了我的图片的底部。@user11571537在Lajos回答了你原来的问题后，把你的问题改成完全不同的问题，这有点不公平。你应该发布一个新问题。