Dibuje un lienzo de uso de palabras "X" HTML

Question

Utilicé un lienzo para dibujar la palabra "X" en la posición del mouse cuando hice clic, pero cuando dibujo una nueva palabra "X", la anterior "X" era "NEGRITA".

http://jsfiddle.net/darklight27/h4JvJ/

¿Tiene alguna sugerencia para mí? ¡¡¡Gracias!!!

Answer 1

Antes de empezar a dibujar sus líneas, llame beginPath():

function drawX(x, y) { 
    ctx.beginPath(); 

    ctx.moveTo(x - 20, y - 20); 
    ctx.lineTo(x + 20, y + 20); 

    ctx.moveTo(x + 20, y - 20); 
    ctx.lineTo(x - 20, y + 20); 
    ctx.stroke(); 
} 

código actualizado en jsFiddle: http://jsfiddle.net/h4JvJ/23/