Как направить указатель мыши на fillRect() используя canvas html5

Question

Я работаю с этим приложением, используя холст jsfiddle, как вы можете видеть, когда вы перемещаете мышь на холсте, черный указатель следует за указателем, а указатель включен в верхнем левом углу этого прямоугольника. Что я хочу достичь только для центрирования указатель на этот прямоугольник, это мой код

HTML

<section id="main"> 
    <canvas id="canvas" width="600" height="400" style="border: 1px solid #aaa;"></canvas> 
</section> 

JavaScript

function firstMethod() { 
    var cv = document.getElementById('canvas'); 

    canvas = cv.getContext('2d');  

    window.addEventListener("mousemove", animate, false); 
} 

function animate(ev) { 
    canvas.clearRect(0,0,600,400); 
    var xPos = ev.clientX; 
    var yPos = ev.clientY; 

    canvas.fillRect(xPos, yPos, 100, 100); 
} 

window.addEventListener("load", firstMethod, false); 

спасибо заранее.

Answer 1

попробуйте это, я просто положил -50 в xPos и ​​yPos, чтобы сделать его центром. так как размер вы установили на fillRect() составляет 100 х 100

function animate(ev) { 
    canvas.clearRect(0,0,600,400); 
    var xPos = ev.clientX; 
    var yPos = ev.clientY; 

    canvas.fillRect(xPos-50, yPos-50, 100, 100); 
} 

demo