Javascript 如何将画布动态覆盖到图像上

我有一个

img

标签，我需要在上面画一个透明的覆盖层

我想用

canvas

匹配图像的大小和位置，但是由于我的上下文是动态的，我需要用

javascript

调整这些参数

我尝试使用

canvas.style.left

，

canvas.style.top

，但它们似乎没有按预期工作（

canvas.style.left

仅当我为其指定

0

时才起作用）

此外，当我指定

宽度

和

高度时，如下所示：

canvas.width = img.clientWidth
canvas.height = img.clientHeight

它似乎没有得到正确的值

我正在使用
DevExpress
从从数据库获取的
模型
动态加载
BinaryImage
，这是代码的一部分：

    <div class="container-fluid" style="margin: 10px; margin-bottom: 15px">
    @if (Model.Image != null) {
        Html.DevExpress().BinaryImage(
                        settings => {
                            settings.Name = "mapImage";
                            settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
                        }).Bind((Model.Image).ToArray()).GetHtml();
        <canvas id="mapOverlay" ></canvas>
    }
</div>

是否有任何
DevExpress
组件可供使用，但我可能不知道我可以使用

编辑
遵循此代码：

    function DrawPoint(x, y, z) {
    $("#myModal").modal("show");
    var canvas = document.getElementById("mapOverlay");
    var c = canvas.getContext('2d');
    console.log("Setting canvas stuff");
    var img = document.getElementById('myMap');
    console.log("Image x: " + img.x)
    console.log("Image y: " + img.y)
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.style.left = img.x + "px";
    canvas.style.top = img.y + "px";

    clearCanvas();
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI * 2, false);
    c.fillStyle = "red";
    c.fill();
    c.stroke();
    c.closePath();

}

函数中的
console.logs
告诉我
img.x
和
img.y
都是
0
，但是如果我从浏览器中的控制台获得它们的值，它们就有一些值

这会是什么
 请注意，画布宽度/高度属性与画布宽度/高度样式不同。属性影响图形，而样式影响渲染。见下文：
document.addEventListener（“DOMContentLoaded”），函数（事件）{
var drawStuff=函数（画布、上下文）{
rect（0,01000100）；
stroke（）；
}
var imageMouseEnter=函数（事件）{
var image=event.target；
var canvas=document.getElementById（“覆盖”）；
var context=canvas.getContext（“2d”）；
canvas.style.left=image.x+“px”；
canvas.style.top=image.y+“px”；
canvas.style.width=image.width+“px”；
canvas.style.height=image.height+“px”；
绘图材料（画布、背景）；
};
var imageMouseExit=函数（事件）{
};
var images=document.getElementsByTagName（'img'）；
对于（var i=0；i

您是否可以通过堆栈溢出代码片段工具发布一个工作示例？很抱歉回复太晚。。。不，我不能发布一个工作示例，因为我从数据库中获取图像和其他内容，并且所有内容都在MVC5 web应用程序中：（我没有忽略你。我只是被截止日期淹没了……我会在尝试时告诉你它是如何进行的，但我感觉这可能是解决方案，因为我忘了附加“px”对于画布值！我的需要是一个不同的上下文，但我能够根据我的需要调整您的建议。我设法将画布的大小与图像的大小匹配，但对于顶部和左侧，我有一些问题。此外，我建议您使用canvas.width和canvas.height，因为style属性不会更改画布分辨率，导致一个糟糕的绘图（我在实验中发现）。有时我得到img.x和img.y都等于零，但过了一段时间，它们得到！=0的值。我能问你为什么吗？我将展示我编辑问题和添加代码的意思
    function DrawPoint(x, y, z) {
    $("#myModal").modal("show");
    var canvas = document.getElementById("mapOverlay");
    var c = canvas.getContext('2d');
    console.log("Setting canvas stuff");
    var img = document.getElementById('myMap');
    console.log("Image x: " + img.x)
    console.log("Image y: " + img.y)
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.style.left = img.x + "px";
    canvas.style.top = img.y + "px";

    clearCanvas();
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI * 2, false);
    c.fillStyle = "red";
    c.fill();
    c.stroke();
    c.closePath();

}