在javascript中设置函数内部的画布位置

我在用javascript定位画布时遇到了一些问题。 我的操作流程如下所示：

Ajax请求被发送到服务器

收到响应后，我从JSON值获取数据，并对这些数据调用函数

该函数使用

simpleheat

操作，以便在画布上绘制覆盖到原始图像的热图

这是

HTML

<div id="rightPanel" class="col-md-9">
    <img id="worldMap" width="800" height="600" />
    <canvas class="coveringCanvas" id="heatmap" />
</div>

我的AJAX请求：

以及

绘图点

功能：

    .coveringCanvas {
    position: absolute;
}

现在，为我的

画布设置
高度
和
宽度
没有问题

设置
顶部
和
左侧
无效

如果我在浏览器（Firefox Quantum）中的
javascript
控制台重复相同的指令，定位就会完美无瑕

如果我记录
img.x
和
img.y
值，它们在函数中也是正确的，问题似乎是分配给
canvas

可能是什么
 也许您可以将函数的内部设置为“左”和“上”

例如：

function OnUpdateClick() {
    begin = beginDate.GetDate().toLocaleString("it-IT");
    end = endDate.GetDate().toLocaleString("it-IT");
    if (begin == null || end == null) {
        alert("Immettere delle date!")
    } else {
        $.post("/Heatmap/getHeatmap",
            { beginDate: begin, endDate: end },
            function (data) {
                map = data["mapImage"];
                var img = document.getElementById('worldMap');
                img.src = arrayBufferDataUri(map);
                positions = data["positions"];
                drawPoints(positions);
            });
    }

您当前的代码未使用您的值。应该读为
canvas.style.left=img.x+“px”？是的，我错误地粘贴了一个olter版本，我已经纠正了它仍然不工作，即使按照@Vini的建议将位置设置为绝对？我现在不能尝试，我会在几分钟内！好的，当您将代码更改为硬编码的
15px
时，它是否正确地将其定位为15px？因为我错误地粘贴了旧版本的代码，所以出现了一个错误。检查新的绘图点，我在画布的顶部和左侧使用img.x和img.y，并告诉我您的答案是否保持不变（应该如此）。顺便说一句，我很快就会给你打电话的，谢谢！img.x和img.y正在获取值。没有设置它们。记录在案，当然不知道你的下一个意图。：）
 function drawPoints(data) {
    var img = document.getElementById('worldMap');
    var canvas = document.getElementById('heatmap');
    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";
    simpleheat('heatmap').data(data).radius(30,25).draw();
}

 function drawPoints(data) {
    var img = document.getElementById('worldMap');
    var canvas = document.getElementById('heatmap');
    console.log("Image x: " + img.x)
    console.log("Image y: " + img.y)
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.style.position = 'absolute';  // Right Here!
    canvas.style.left = "15px";
    canvas.style.top = "15px";
    simpleheat('heatmap').data(data).radius(30,25).draw();
}