clearRect function doesn't clear the canvas

You should use "beginPath()". That is it.

function lineDraw() {       var canvas=document.getElementById("myCanvas");    var context=canvas.getContext("2d");    context.clearRect(0, 0, context.width,context.height);    context.beginPath();//ADD THIS LINE!<<<<<<<<<<<<<    context.moveTo(0,0);    context.lineTo(event.clientX,event.clientY);    context.stroke();}

Be advised that ctx.clearRect() does not work properly on Google Chrome. I spent hours trying to solve a related problem, only to find that on Chrome, instead of filling the rectangle with rgba(0, 0, 0, 0), it actually fills the rectangle with rgba(0, 0, 0, 1) instead!

Consequently, in order to have the rectangle filled properly with the required transparent black pixels, you need, on Chrome, to do this instead:

ctx.fillStyle = "rgba(0, 0, 0, 0)";ctx.fillRect(left, top, width, height);

This should, of course, work on all browsers providing proper support for the HTML5 Canvas object.

And beginPath() and stroke() we need to use.This code works same as clearRect(...)

ctx.beginPath();ctx.fillStyle = "rgba(0, 0, 0, 255)";ctx.fillRect(0, 0, canvas.width, canvas.height);    ctx.stroke();