javascript - Image appear at mouse location -

When I click on the canvas I'm trying to create an image instead of the coordinate mouse.

I see it now, but I can only understand how to do this with automatic updating coordinates and the image will follow the mouse after "onclick".

I need to make it so that the image can only be accessed at the place I click, not following the cursor.

  & lt ;! DOCTYPE html & gt; & Lt; Html lang = "en" & gt; & Lt; Top & gt; & Lt; Style & gt; Body {margin: 0 px; Padding: 0 pixels; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Title & gt; Click to create a sad face & lt; / Title & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Canvas ID = "Mikevas" width = "2000" height = "1000", onClick = "mesephus ();" & Gt; & Lt; / Canvas & gt; & Lt; Script type = "text / javascript" & gt; Write a message (canvas, message) {var ctx = canvas.getContext ('2d'); Ctx.clearRect (0, 0, canvas wide, canvas.height); Ctx.font = '18pt Calibri'; Ctx.fillStyle = 'black'; Ctx.fillText (Message, 10, 25); } GetMousePos function (canvas, EVT) {var rect = canvas.getBoundingClientRect (); Return {x: evt.clientX - rect.left, y: evt.clientY - rect.top}; } Var Canvas = document.getElementById ('myCanvas'); Var ctx = canvas.getContext ('2d'); Message to 'canvas.addEventListener' ('MouseMove', function (evt) {var mousePos = getMousePos (canvas, evt); = 'Click to make a face appear on coordinates:' + mousePos.x + ',' + MousePos.y; write message (canvas, message);}, false); Function makeface () {canvas.addEventListener ( 'MouseMove', function (evt) {var mousePos2 = getMousePos (canvas, evt); var headx = mousePos2.x; var substance = mousePos2.y; var message = 'appears you face made Is, you are currently in coordinates: '+ mousePos2.x +', '+ mousePos2.y; write message (canvas, message); var header = 50; var smile offset x = 0; var frownoffsety = 33; var smilerad = 20; var eyeoffsety = -10; var lefteyeoffsetx = -15; var righteyeoffsetx = -lefteyeoffsetx; var eyerad = 8; ctx.strokeStyle = "blue"; ctx.lineWidth = 5; ctx.beginPath (); ctx. arc (headx, alcoholic, headrad 0,2 * Math.PI, true); ctx.closePath (); ctx.stroke () ;. ctx.beginPath () ctx.arc (headx + smileoffsetx, alcoholic + frownoffsety, sm ilerad, - 20 * Mathematics. PI, - 80 * Math.PI, true) ;. ctx.stroke (); ctx.beginPath () ctx.arc (headx + lefteyeoffsetx, alcoholic + eyeoffsety, eyerad 0,2 * Math. PI, true); ctx .fillStyle = "blue"; ctx.fill (); ctx.beginPath () ctx.arc (headx + righteyeoffsetx, alcoholic + eyeoffsety, eyerad 0,2 * Math.PI, true); Ctx.fill ();}, false); } & Lt; / Script & gt; & Lt; / Body & gt; & Lt; / Html & gt;  
 
 This is happening because the memos function of your writing is clearing the whole canvas.  
 This is my quick and dirty solution:  
  & lt; Canvas id = "myCanvas" width = "2000" height = "1000" onClick = "document.madeFace = 0; message ();" & gt; & Lt; / Canvas & gt;   
 ...  
  function Mesefes () {canvas.addEventListener ( 'mousemove', function (evt) {var mousePos2 = getMousePos (canvas, UK ); Document.madeFace = document.madeFace || mousePos2; / * Added * / var message = 'You have seen the face, you are currently in coordinates:' + mousePos2.x + ',' + mousePos2.y; mousePos2 = Document.madeFace; / * Added * / var HeadX = MousePos 2.x; var Headley = MousePos 2.y;   
 ...  
 What is this code When the user clicks, then store the coordinates of the face. , Then the variable "document.madeFace" gets reset to 0 and therefore the coordinates of the face are re-calculated.  
 But whenever the mouse moves, the face is still again Is prepared, and therefore it will also appear, even if the entire canvas is removed.