Place X, Y values on an image when loading the page | Javascript

Question

I have this javascript code that puts a marker with the x and y location when you click on the image, but I want to fill the markers with the values of my database when loading the page and not when I click on the image

tried with my own values var mouseXPos = 225; var mouseYPos = 339; and the addeventlistener load eventcanvas.addEventListener ("load", mouseClicked, true);but it didn’t work, so how can I fill x, y values in this image when loading the page with database values instead of clicking

  <script>
    
    var canvas = document.getElementById('Canvas');
    var context = canvas.getContext("2d");
    
    // Map sprite
    var mapSprite = new Image();
    mapSprite.src = "http://localhost/Db/public/assets/img.png";
    
    var Marker = function () {
        this.Sprite = new Image();
        this.Sprite.src = "http://www.clker.com/cliparts/w/O/e/P/x/i/map-marker-hi.png"
        this.Width = 12;
        this.Height = 20;
        this.XPos = 0;
        this.YPos = 0;
    }
    
    var Markers = new Array();
    
    var mouseClicked = function (mouse) {
        // Get corrent mouse coords
        var rect = canvas.getBoundingClientRect();
        var mouseXPos = 225;
        var mouseYPos = 339;
    
        console.log("Marker added");
    
        // Move the marker when placed to a better location
        var marker = new Marker();
        marker.XPos = mouseXPos - (marker.Width / 2);
        marker.YPos = mouseYPos - marker.Height;
    
        Markers.push(marker);
    }
    
    // Add mouse click event listener to canvas
    canvas.addEventListener("load", mouseClicked, true);
    
    var firstLoad = function () {
        context.font = "15px Georgia";
        context.textAlign = "center";
    }
    
    firstLoad();
    
    var main = function () {
        draw();
    };
    
    var draw = function () {
        // Clear Canvas
        context.fillStyle = "#000";
        context.fillRect(0, 0, canvas.width, canvas.height);
    
        // Draw map
        // Sprite, X location, Y location, Image width, Image height
        // You can leave the image height and width off, if you do it will draw the image at default size
        context.drawImage(mapSprite, 0, 0, 550, 550);
    
        // Draw markers
        for (var i = 0; i < Markers.length; i++) {
            var tempMarker = Markers[i];
            // Draw marker
            context.drawImage(tempMarker.Sprite, tempMarker.XPos, tempMarker.YPos, tempMarker.Width, tempMarker.Height);
    
            // Calculate postion text
            var markerText = "Postion (X:" + tempMarker.XPos + ", Y:" + tempMarker.YPos;
    
            // Draw a simple box so you can see the position
            var textMeasurements = context.measureText(markerText);
            context.fillStyle = "#666";
            context.globalAlpha = 0.7;
            context.fillRect(tempMarker.XPos - (textMeasurements.width / 2), tempMarker.YPos - 15, textMeasurements.width, 20);
            context.globalAlpha = 1;
    
            // Draw position above
            context.fillStyle = "#000";
            context.fillText(markerText, tempMarker.XPos, tempMarker.YPos);
        }
    };
    
    setInterval(main, (1000 / 60)); // Refresh 60 times a second
    </script>

Answer 1

this is the key code...

    var marker = new Marker();
    marker.XPos = mouseXPos - (marker.Width / 2);
    marker.YPos = mouseYPos - marker.Height;
    Markers.push(marker);

which can give rise to a simple-to-use function:

function addMarker(x,y) {
    var marker = new Marker();
    marker.XPos = x - (marker.Width / 2);
    marker.YPos = y - marker.Height;
    Markers.push(marker);
}
//exemplo
var dados = [{x:16,y:61},{x:350,90},{x:300,40}];
dados.forEach((point)=>
    addMarker(point.x,point.y)
);

*remembering that the coordinates are always not related to imagen..., but to the canvas 550x550 ...I don’t know which database you’re referring to, but I would advise you to send the JSON coordinates, get the host file with fetch/ajax......

Repeated copies in memory

advise make these variables static/global if always keep the same value...

    this.Sprite = new Image();
    this.Sprite.src = "http://www.clker.com/cliparts/w/O/e/P/x/i/map-marker-hi.png"
    this.Width = 12;
    this.Height = 20;

Updates:

recommend taking the setInterval, the canvas and calling the draw() manually after the edits... since the canvas will not miss what has already been drawn, no matter the time.