Afficher une croix à partir de son centre

Question

Le code suivant me permet de cliquer sur une image (toile), d'avoir des coordonnées et de placer une croix exactement là où le clic a été fait. Le problème avec la croix, qu'il sera représenté à partir du coin (droite-bas) et je vais avoir un décalage entre le clic et la croix, qui ne représentent pas la coordonnée exacte. En d'autres termes, le centre de la croix devrait être l'origine de la dislaying des coordonnées.

Comment faire?

var canvas = document.getElementById('Canvas'); 
 
var context = canvas.getContext("2d"); 
 

 
// Map sprite 
 
var mapSprite = new Image(); 
 
mapSprite.src = "image.png"; 
 

 
//Declare Marker sprite 
 
var Marker = function() { 
 
    this.Sprite = new Image(); 
 
    this.Sprite.src = "cross.png" 
 
    this.Width = 10; 
 
    this.Height = 10; 
 
    this.XPos = 0; 
 
    this.YPos = 0; 
 
} 
 

 
var Markers = new Array(); 
 

 
var mouseClicked = function (mouse) { 
 
    // Get corrent mouse coords 
 
    var rect = canvas.getBoundingClientRect(); 
 
    var mouseXPos = Math.round(mouse.x - rect.left); 
 
    var mouseYPos = Math.round(mouse.y - rect.top); 
 

 
    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; 
 
    marker.YPosNew = marker.YPos; 
 
    Markers.push(marker); 
 

 
    // Draw marker 
 
    context.drawImage(Markers[0].Sprite, Markers[0].XPos, Markers[0].YPos, Markers[0].Width, Markers[0].Height); 
 
    // Calculate postion text 
 
    var markerText = Markers[0].XPos + ", " + Markers[0].YPosNew; 
 

 

 
    // disable pointer after 1s 
 
    setTimeout(function(){ 
 
    document.getElementById('Canvas').style.cursor="not-allowed"; } , 1000); 
 
} 
 

 
// Add mouse click event listener to canvas 
 
canvas.addEventListener("mousedown", mouseClicked, false); 
 

 
var main = function() { 
 
    draw(); 
 
}; 
 

 
var draw = function() { 
 
    // Clear Canvas 
 
    context.fillStyle = "#000"; 
 
    context.fillRect(0, 0, canvas.width, canvas.height); 
 

 
    // Draw diagramme 
 
    context.drawImage(mapSprite, 0, 0, 954, 267); 
 
    //draw all precedent cross 
 
    cross = new Image(); 
 
    cross.src = "cross.png"; 
 

 
} 
 
mapSprite.addEventListener('load', main);

<div style="width : 75%;margin : auto;"> 
 
    <canvas id="Canvas" width="954" height="267"></canvas> 
 
</div>

Answer 1

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

changement Ypos de votre marqueur, voilà pourquoi sa hausse. dans ce cas, la croix se positionnera au milieu du clic.