再描画のためにキャンバスをクリアする方法

合成操作を試し、キャンバスに画像を描画した後、画像を削除して合成しようとしています。どうすればよいですか？

他の画像を再描画するためにキャンバスをクリアする必要があります。これはしばらく続くので、毎回新しい長方形を描くことが最も効率的なオプションになるとは思いません。

const context = canvas.getContext('2d');

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

使用する： context.clearRect(0, 0, canvas.width, canvas.height);

これは、キャンバス全体をクリアするための最も速くて最も記述的な方法です。

使ってはいけません： canvas.width = canvas.width;

リセットすると、canvas.widthすべてのキャンバスの状態（たとえば、変換、lineWidth、strokeStyleなど）がリセットされ、（clearRectと比較して）非常に遅くなります。すべてのブラウザで機能するわけではなく、実際に何をしようとしているのかを説明しません。

変換された座標の扱い

あなたは変換マトリックスを変更した場合（例えば使用してscale、rotateまたはtranslateそれから）context.clearRect(0,0,canvas.width,canvas.height)可能性の高いキャンバスの全体の可視部分はクリアされません。

ソリューション？キャンバスをクリアする前に変換行列をリセットします。

// Store the current transformation matrix
context.save();

// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);

// Restore the transform
context.restore();

編集： プロファイリングを完了しました。（Chromeでは）変換をリセットせずに300x150（デフォルトサイズ）のキャンバスをクリアする方が約10％高速です。キャンバスのサイズが大きくなると、この差は小さくなります。

これはすでに比較的重要ではありませんが、ほとんどの場合、描画するよりもかなり多く描画することになります。このパフォーマンスの違いは重要ではないと私は思います。

100000 iterations averaged 10 times:
1885ms to clear
2112ms to reset and clear

線を描く場合は、次のことを忘れないでください。

context.beginPath();

そうしないと、行がクリアされません。

他の人はすでに質問に答えて優れた仕事をしclear()ましたが、コンテキストオブジェクトの単純なメソッドがあなたに役立つ場合（私にとっては）、これは私がここでの回答に基づいて使用する実装です。

CanvasRenderingContext2D.prototype.clear = 
  CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
    if (preserveTransform) {
      this.save();
      this.setTransform(1, 0, 0, 1, 0, 0);
    }

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

    if (preserveTransform) {
      this.restore();
    }           
};

使用法：

window.onload = function () {
  var canvas = document.getElementById('canvasId');
  var context = canvas.getContext('2d');

  // do some drawing
  context.clear();

  // do some more drawing
  context.setTransform(-1, 0, 0, 1, 200, 200);
  // do some drawing with the new transform
  context.clear(true);
  // draw more, still using the preserved transform
};

• Chromeは適切に応答します。context.clearRect ( x , y , w , h );@ Pentium10によって提案されていますが、IE9はこの命令を完全に無視しているようです。
• IE9は応答するようですcanvas.width = canvas.width;が、@ John Allsoppの幅を最初に変更するソリューションも使用しない限り、ライン、図形、画像、その他のオブジェクトはクリアされません。

したがって、次のように作成されたキャンバスとコンテキストがある場合：

var canvas = document.getElementById('my-canvas');
var context = canvas.getContext('2d');

次のような方法を使用できます。

function clearCanvas(context, canvas) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  var w = canvas.width;
  canvas.width = 1;
  canvas.width = w;
}

これは2018年ですが、再描画のためにキャンバスを完全にクリアするネイティブの方法はまだありません。キャンバスを完全にクリアclearRect() しません。非塗りつぶしタイプの図面は消去されません（例：rect()）

1. 描画方法に関係なくキャンバスを完全にクリアするには：

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

長所：strokeStyle、fillStyleなどを保持します。遅れなし;

短所：何かを描画する前にbeginPathを既に使用している場合は不要

2.幅/高さのハックを使用する：

context.canvas.width = context.canvas.width;

または

context.canvas.height = context.canvas.height;

長所：IEで動作します短所：strokeStyle、fillStyleを黒にリセットします。遅れる;

なぜネイティブソリューションが存在しないのかと思っていました。実際にclearRect()は、ほとんどのユーザーがbeginPath()新しいパスを描画する前に行うため、単一行ソリューションと見なされます。beginPathは線の描画中にのみ使用され、次のような閉じたパスではありませんがrect().

これが、受け入れられた回答が私の問題を解決しなかった理由であり、私はさまざまなハックを試すために何時間も無駄にしてしまいました。Mozillaの呪い

キャンバスのx、y座標と高さと幅を渡して、clearRectメソッドを使用します。ClearRectは次のようにキャンバス全体をクリアします。

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

ここにはたくさんの良い答えがあります。もう1つの注意点は、キャンバスを部分的にのみクリアすることが楽しい場合があることです。つまり、前のイメージを完全に消去するのではなく、「フェードアウト」します。これは素晴らしいトレイル効果を与えます。

それは簡単です。背景色が白だとすると：

// assuming background color = white and "eraseAlpha" is a value from 0 to 1.
myContext.fillStyle = "rgba(255, 255, 255, " + eraseAlpha + ")";
myContext.fillRect(0, 0, w, h);

簡単な方法は

canvas.width = canvas.width

Idkそれがどのように機能するかですが、それは機能します！

これは、境界や行列の変換に関係なく、私が使用するものです。

function clearCanvas(canvas) {
  const ctx = canvas.getContext('2d');
  ctx.save();
  ctx.globalCompositeOperation = 'copy';
  ctx.strokeStyle = 'transparent';
  ctx.beginPath();
  ctx.lineTo(0, 0);
  ctx.stroke();
  ctx.restore();
}

基本的に、コンテキストの現在の状態を保存し、copyasで透明なピクセルを描画しglobalCompositeOperationます。次に、以前のコンテキスト状態を復元します。

これはchart.jsの私のpieChartで機能しました

<div class="pie_nut" id="pieChartContainer">
    <canvas id="pieChart" height="5" width="6"></canvas> 
</div>

$('#pieChartContainer').html(''); //remove canvas from container
$('#pieChartContainer').html('<canvas id="pieChart" height="5" width="6"></canvas>'); //add it back to the container

私がテストしたすべてのブラウザーで、最速の方法は実際に白または希望の色でfillRectを塗りつぶすことです。非常に大きなモニターを使用していますが、フルスクリーンモードでは、clearRectは非常に遅くなりますが、fillRectは妥当です。

context.fillStyle = "#ffffff";
context.fillRect(0,0,canvas.width, canvas.height);

欠点は、キャンバスが透明にならないことです。

Webkitでは、幅を別の値に設定する必要があります。その後、幅を初期値に戻すことができます

function clear(context, color)
{
    var tmp = context.fillStyle;
    context.fillStyle = color;
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillStyle = tmp;
}

シンプルですがあまり読みにくい方法は、次のように書くことです。

var canvas = document.getElementId('canvas');

// after doing some rendering

canvas.width = canvas.width;  // clear the whole canvas

いつも使う

cxt.fillStyle = "rgb(255, 255, 255)";
cxt.fillRect(0, 0, canvas.width, canvas.height);

context.clearRect(0,0,w,h)   

指定された長方形をRGBA値で塗りつぶします：
0 0 0 0：Chromeを使用
0 0 0 255：FFおよびSafariを使用

だが

context.clearRect(0,0,w,h);    
context.fillStyle = 'rgba(0,0,0,1)';  
context.fillRect(0,0,w,h);  

ブラウザに関係なく、長方形を
0 0 0 255で埋めましょう
！

Context.clearRect(starting width, starting height, ending width, ending height);

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

最短の方法：

canvas.width += 0

最速の方法：

canvas = document.getElementById("canvas");
c = canvas.getContext("2d");

//... some drawing here

i = c.createImageData(canvas.width, canvas.height);
c.putImageData(i, 0, 0); // clear context by putting empty image data

clearRectのみを使用する場合、図面を送信するフォームにそれがある場合は、クリアリングの代わりに送信されます。または、最初にクリアしてから空の図面をアップロードできるため、追加する必要があります。関数の開始時のpreventDefault：

   function clearCanvas(canvas,ctx) {
        event.preventDefault();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }


<input type="button" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);">

それが誰かを助けることを願っています。

私はいつもこれを使います

ctx.clearRect(0, 0, canvas.width, canvas.height)
window.requestAnimationFrame(functionToBeCalled)

注意

clearRectとrequestAnimationFrameを組み合わせることで、より流動的なアニメーションが可能になります。

これらはすべて、標準のキャンバスをクリアする方法の優れた例ですが、paperjsを使用している場合、これは機能します。

JavaScriptでグローバル変数を定義します。

var clearCanvas = false;

PaperScriptから以下を定義します。

function onFrame(event){
    if(clearCanvas && project.activeLayer.hasChildren()){
        project.activeLayer.removeChildren();
        clearCanvas = false;
    }
}

これで、clearCanvasをtrueに設定すると、画面からすべてのアイテムがクリアされます。