How to overlay a canvas dynamically onto an image

Question

I have an img tag and I need to draw on it with a transparent overlay.

I was thinking about a canvas mathing the image size and position, but because my context is dynamic I need to adjust there parameters with javascript .

I tried to work with canvas.style.left , canvas.style.top but they not seem to work as expected ( canvas.style.left works only if I assign 0 to it).

Furthermore, when I assign the width and the height like this:

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

It seems not to get the right values.

I'm using DevExpress to dynamically load the BinaryImage from a Model fetched from a database, this is the portion of code:

    <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>

Note that the DevExpress code results in the following img element:

<img class="dxeImage_Material" id="mapImage" src="/DXB.axd?DXCache=e86a5e5f-7d8b-4704-9330-ec7b9fa2ad38" alt="" style="width:100%;">

Is there any DevExpress component to use I may not be aware of that I could use?

EDIT Following this code:

    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();

}

The console.logs inside the function tells me that img.x and img.y are both 0 , but if I get their values from the console in my browser they have some value.

What can this be?

Answer 1

Note that the canvas width/height attributes are different from canvas width/height styles. Attributes effect drawing, while style effects rendering. See below:

 document.addEventListener("DOMContentLoaded", function(event) { var drawStuff = function(canvas, context) { context.rect(0, 0, 100, 100); context.stroke(); } var imageMouseEnter = function(event) { var image = event.target; var canvas = document.getElementById("overlay"); 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"; drawStuff(canvas, context); }; var imageMouseExit = function(event) { }; var images = document.getElementsByTagName('img'); for(var i = 0; i < images.length; i++) { images[i].addEventListener('mouseover', imageMouseEnter); images[i].addEventListener('mouseout', imageMouseExit); } }); 

 <canvas id="overlay" width="100" height="100" style="position:absolute"></canvas> <div style="width:350px"> <img src="http://via.placeholder.com/350x150" /> <img src="http://via.placeholder.com/145x100" /> <img src="http://via.placeholder.com/200x100" /> <img src="http://via.placeholder.com/350x65" /> </div>