如何在画布上的鼠标光标位置显示图像？

Question

How can I display image in a canvas at the position of my mouse cursor so that it can move around with my mouse movement.

Here is the code but it does not work:

 var canvas = document.getElementById("mycanvas"); context = canvas.getContext("2d"); canvas.addEventListener("mousemove", mouseMoved); context.fillText("Put mouse here", 10, 10); function mouseMoved(e) { context.clearRect(0, 0, canvas.width, canvas.height); var imageObj = new Image(); imageObj.src = "avatar.png"; imageObj.onload = function() { context.drawImage(imageObj, e.clientX - (canvas.offsetLeft - window.pageXOffset), e.clientY - (canvas.offsetTop - window.pageYOffset)], 224, 320); }; // the following code that displays a still image works. /*var imageObj = new Image(); imageObj.src = "avatar.png"; imageObj.onload = function() { context.drawImage(imageObj, 225, 100, 224, 320); };*/ } 

 text<br/> text<br/> text<br/> text<br/> text<br/> text<br/> text<br/> text<br/> text<br/> <canvas id="mycanvas" width="800" height="450", position: relative></canvas> text<br/> text<br/> text<br/> text<br/> text<br/> text<br/> text<br/> text<br/> 

If I use the code that is currently out it will work. However that is just a still image. I want to be able to move the image around with my mouse cursor. Thanks.

Answer 1

Remove the square bracket here and it works

window.pageYOffset)], 224, 320);

http://jsfiddle.net/sjmcpherso/dnt12psm/