Question

I have a little mouse effect which draws on a canvas, however when the mouse intersects with another dom element the browser has issues and doesnt cleanly follow the mouse, instead it gets confused and throws the co-ordinates off causing the effect to be unstable.

I have tried attaching the listener to the cnvas, the document and the window as my initial thought was to do with other events bubbling up and throwing things off but… no dice.

Have a look here and move your mouse over the edges of the layer:
http://jsbin.com/ofosur/9/edit#javascript,html,live

also it gets even stranger with a bit of rotaion added to the div:
http://jsbin.com/ofosur/8/edit#javascript,html,live

Thank you very much indeed for any help at all!

Answer 1

This function is getting called when the mouse enters that internal space which is restarting the brush stroke….

function onCanvasMouseOver(event) {
    strokestart(event.clientX, event.clientY);

comment out strokestart and it seems to work. hth