キャンバスをクリアして、（0,0）とマウス座標の間に常に線が表示されるようにするにはどうすればよいですか？

Question

私は、単純な描画プログラムを作成することにより、HTMLのcanvas要素を模索し始めています：

• 私はキャンバス上で私のマウスを移動すると、私はラインが（0,0）と私のマウス座標の間に描画することにしたいです。私は1つの線をいつでもレンダリングしたいだけです。
• マウスの移動時に1行だけが表示されるようにするには、コンテキストをクリアして（0,0）からmouse（x、y）に新しい行を描画します。
• 上記は「フリーフォーム」または「ペンシル」描画ツールと同じではなく、「ライン」ツールの粗いフォームです。

  context.clearRect(0, 0, canvas.width, canvas.height); 
  

  をして、次の操作を行います：

マウス移動イベントハンドラ内

、私が最初にこれを行う

context.moveTo(0, 0); 
context.lineTo(mousePos.x, mousePos.y); 
context.stroke(); 

問題があり、キャンバスがクリアし、以前のすべての行されていませんまだ描かれている。

完全なコードはここにある：https://jsfiddle.net/csenthiltech/7ozsnhoy/

私はオンラインの簡単な描画プログラムのソースコードを通過しようと、彼らはあまりにも同様のアプローチを踏襲しました。しかし、私はそれを働かせることができません。ここで私はこのトピックについて通り抜けたいくつかの質問です：

• Draw on HTML5 Canvas using a mouse
• How do I hand draw on canvas with JavaScript?

は、私はここで何をしないのですか？

Answer 1

私は答えhere

は、理由はあなたがcontext.beginPath（コールしない場合ということです見つかっ）& context.closePath（）、脳卒中（）は、すべての以前に保存されたコマンドを描画します。

context.beginPath(); 
context.moveTo(0, 0); 
context.lineTo(mousePos.x, mousePos.y); 
context.clearRect(0, 0, canvas.width, canvas.height); 
context.stroke(); 

Jsfiddle here