Javascript JS画布无意中拉伸div

我有一个有图像的div。稍后将加载图像本身：

HTML：

<div id="image_holder" class='hide'>
    <img id="image" onload="createStimuli() " >
    <canvas id="canvasOverImage" class="coveringCanvas" ></canvas>
</div>

下一步，当时间合适时，我加载图像

因为现在图像已加载，它会触发

createStimuli（）

：

此代码将画布精确地放置在图像的顶部（如预期的那样），但在将位置更改为顶部之前，它似乎被放置在图像的下方或旁边，从而拉伸画布

因此，即使画布位于图像上，画布的创建也会拉伸div，在div下方/旁边留下空白

---

有没有办法解决这个问题？还是在创建画布后调整div的大小？

要解决此问题：

首先将

image\u支架
div的
position
设置为
relative
。确保所有绝对定位元件将定位到最后一个位置

然后将画布
定位
到
绝对
并
左
定位到
0

document.getElementById('image').src = `imagesource`;

你们可以测试下面的代码片段，我已经给canva添加了一些边框来查看结果


document.getElementById（'image'）.src=”https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg";
函数createStimuli（）{
var image=$（“#image”）；
var canvas=$（'canvasOverImage'）；
//css（{top:-（image.height（）+5）+'px'}）；//通过css设置样式
attr（{“height”：image.height（），“width”：image.width（）}）；
}
图像固定器{
位置：相对位置；
}
#血管溃疡病{
边框：1px纯红；
位置：绝对位置；
}
#血管溃疡病{
左：0；
}
要解决此问题：

首先将
image\u支架
div的
position
设置为
relative
。确保所有绝对定位元件将定位到最后一个位置

然后将画布
定位
到
绝对
并
左
定位到
0

document.getElementById('image').src = `imagesource`;

你们可以测试下面的代码片段，我已经给canva添加了一些边框来查看结果


document.getElementById（'image'）.src=”https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg";
函数createStimuli（）{
var image=$（“#image”）；
var canvas=$（'canvasOverImage'）；
//css（{top:-（image.height（）+5）+'px'}）；//通过css设置样式
attr（{“height”：image.height（），“width”：image.width（）}）；
}
图像固定器{
位置：相对位置；
}
#血管溃疡病{
边框：1px纯红；
位置：绝对位置；
}
#血管溃疡病{
左：0；
}
您可以通过以下方式以更高效的方式完成此任务


document.getElementById（'image'）.src=”https://s-media-cache-ak0.pinimg.com/736x/52/30/66/523066972863437c1a5daa774d1e5414.jpg";
功能刺激（e）{
var canvas=$（“#canvasOverImage”）[0]；
//设置画布css样式
canvas.style.marginLeft=-（e.width+3）+'px'；//3~边框宽度
//在html中设置画布属性
canvas.width=e.width；
canvas.height=e.height；
//在画布上绘制文本*证明画布位于顶部*
var ctx=canvas.getContext（'2d'）；
ctx.fillStyle='黑色'；
ctx.font='bold 18px Arial'；
ctx.fillText（'hello'，10,25）；
}
.coveringCanvas{
边框：3倍纯黑；
}
.隐藏{
显示器：flex；
}
您可以通过以下方式以更高效的方式完成此任务


document.getElementById（'image'）.src=”https://s-media-cache-ak0.pinimg.com/736x/52/30/66/523066972863437c1a5daa774d1e5414.jpg";
功能刺激（e）{
var canvas=$（“#canvasOverImage”）[0]；
//设置画布css样式
canvas.style.marginLeft=-（e.width+3）+'px'；//3~边框宽度
//在html中设置画布属性
canvas.width=e.width；
canvas.height=e.height；
//在画布上绘制文本*证明画布位于顶部*
var ctx=canvas.getContext（'2d'）；
ctx.fillStyle='黑色'；
ctx.font='bold 18px Arial'；
ctx.fillText（'hello'，10,25）；
}
.coveringCanvas{
边框：3倍纯黑；
}
.隐藏{
显示器：flex；
}

您希望得到与最终结果完全相同的结果吗？对不起？你是说，我想要什么作为最终结果？画布的创建不会影响div的高度或宽度。您希望得到与最终结果完全相同的结果吗？抱歉？你是说，我想要什么作为最终结果？画布的创建不会影响div的高度或宽度。感谢您的输入。我忘了提到coveringCanvas类的position设置为relative，所以不幸的是不是这样。我已将其添加到主帖子中。现在我已了解您的问题，请查看我的更新答案！谢谢你的意见。我忘了提到coveringCanvas类的position设置为relative，所以不幸的是不是这样。我已将其添加到主帖子中。现在我已了解您的问题，请查看我的更新答案！
function createStimuli() {
    var image = $('#image');        
    var canvas = $('#canvasOverImage');
    canvas.css({top:`-${image.height()}px`});   // set style via css
    canvas.attr({ "height":image.height(), "width" :image.width()});  // set attr in html
}

#canvasOverImage {
  position:absolute;
}