javascript - Canvas signature on scroll changes mouse draw location -


I am trying to use canvas so that someone with a mouse can write their signature until I see the screen By stretching or scrolling, everything works until it pulls the line at a different place than the mouse.

code:

  function onMouseUp (event) {'strict experiment'; Mouse pressed = false; } Ceremony onMouseMove (event) {'strict experiment'; If (mouse button) {event.preventDefault (); Mousex = event. Client X - can.offsetLeft - mleft; MouseY = event.clientY - can.offsetTop - mtop; Ctx.lineTo (mousex, mousse); ctx.stroke (); }} Function onMouseDown (event) {'use strict'; MousePressed = True; Mousex = event. Client X - can.offsetLeft - mleft; MouseY = event.clientY - can.offsetTop - mtop; Ctx.beginPath (); Ctx.moveTo (mousex, mousse); } Can.addEventListener ('mousemove', onMouseMove, incorrect); Can.addEventListener ('mousedown', onMouseDown, False); Can.addEventListener ('mouseup', onMouseUp, Incorrect);   

looks like HTML: & lt; Canvas id = "signature" width = "567" height = "150" & gt; & Lt; / Canvas & gt;

event.clientX / y top left corner of viewport Therefore the scroll has not been kept in mind. Relates to the event.pageX / y document. So this is the situation on the screen that the event has occurred with scroll. You can change all the references from clientX to pageX and clientY in pageY and it should work.



Comments

Post a Comment

Popular posts from this blog

jasper reports - How to center align barcode using jasperreports and barcode4j -

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -