JavaScript Canvasについて詳しい方回答お願いいたします

Question

Canvasにお絵描きするプログラムを組んでいます
消去を押すとお絵描きした内容が消されるのですが、
再度お絵描きをすると消去前のお絵描きが復元されてしまうのですが、
なぜでしょうか？

<input type="button" value="消去" onclick="c.clearRect(0, 0, a.clientWidth, a.clientHeight);">
<canvas width="1000" height="1000"></canvas>

<script>
var f=0;
var a = document.querySelector("canvas"),
    c = a.getContext("2d");

c.lineWidth = 10;
c.strokeStyle = "rgb(0, 0, 255)";
a.onmousedown = function (e) {
  if(f==0){
    f=1;
    c.moveTo(e.pageX, e.pageY);
  };
};

a.onmousemove = function (e) {
  if(f==1){
    c.lineTo(e.pageX, e.pageY);
    c.stroke();
  };
};


a.onmouseup = function (e) {
  f=0;
};

a.ontouchstart = function (e) {
  e.preventDefault();
  c.moveTo(e.touches[0].pageX, e.touches[0].pageY);
};

a.ontouchmove = function (e) {
  c.lineTo(e.touches[0].pageX, e.touches[0].pageY);
  c.stroke();
};
</script>

Answer 1

beginPath()が必要です。

<input type="button" value="消去" onclick="c.beginPath();c.clearRect(0, 0, a.clientWidth, a.clientHeight);">

clearRect にちなんでよく起きる問題は 不適切なパスによって起きています。clearRect を呼んで新しいフレームを描画し始める前に beginPath() を呼ぶのを忘れないようにして下さい。

Answer 2

• CanvasRenderingContext2D.clearRect() - Web API | MDN

Comments

[yambejp]

「clearRect を呼んで新しいフレームを描画し始める前に beginPath() を呼ぶのを忘れないよう」とのこと