Draw a cross at the mouses location on a canvas, non persistently

Question

I have this bound to the mousemove event of my canvas:

function(e){        
    var contDiv = $('#current_system_map'); 
    var offset = contDiv.offset();
    x = e.clientX-offset.left;
    y = e.clientY-offset.top;
    context.beginPath();
    context.moveTo(0,y);
    context.lineTo(595,y);
    context.moveTo(x,0);
    context.lineTo(x,595);
    context.strokeStyle = "rgb(255,255,255)";
    context.stroke();   
}

and it works fine, to a point. The drawn cross is persistent, so when the mouse moves a new cross is drawn but the old one remains. I've tried essentially re-drawing the canvas but that cause the cross to be laggy and remain quite away behind the mouse.

So i need to know how to draw the cross and make it dis-appear without having to re-draw everything on the canvas

Answer 1

Usually if you draw something on the canvas you will have to redrawn the canvas contents to erase it. I suggest you use an image element as a cursor and position it absolutely above the

Or you could try the old trick and draw the cursor in the canvas with globalCompositeOperation='xor', then draw it again in the same place to erase it. Afterwards you will need to restore globalCompositeOperation to source-over.