Newly available 主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。

Canvas reset()

CanvasRenderingContext2D.reset() はキャンバス 2D API のメソッドで、描画コンテキストをデフォルト状態にリセットします。これにより、すべてのプロパティを明示的にリセットすることなく、別の描画に再利用することができます。

リセットすると、バッキングバッファー、描画状態スタック、定義済みのパス、およびスタイルがクリアされます。 この中には、現在の座標変換行列、合成プロパティ、クリッピング領域、破線リスト、線種、テキストのスタイル、影、画像の平滑化、フィルターなどが含まれます。

Canvas・グラフィクス

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
reset
99
99
113
17.2
99
17.2
reset

CanvasRenderingContext2D.reset() はキャンバス 2D API のメソッドで、描画コンテキストをデフォルト状態にリセットします。これにより、すべてのプロパティを明示的にリセットすることなく、別の描画に再利用することができます。
99
99
113
17.2
99
17.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT 
// Get the 2d context
const canvas = document.getElementById("my-house");
const ctx = canvas.getContext("2d");

function drawRect() {
  // Set line width
  ctx.lineWidth = 10;

  // Stroke rect outline
  ctx.strokeRect(50, 50, 150, 100);

  // Create filled text
  ctx.font = "50px serif";
  ctx.fillText("Rect!", 70, 110);
}

function drawCircle() {
  // Set line width
  ctx.lineWidth = 5;

  // Stroke out circle
  ctx.beginPath();
  ctx.arc(300, 100, 50, 0, 2 * Math.PI);
  ctx.stroke();

  // Create filled text
  ctx.font = "25px sans-serif";
  ctx.fillText("Circle!", 265, 100);
}

実務での使いどころ

  • Canvas reset() の活用

    CanvasRenderingContext2D.reset() はキャンバス 2D API のメソッドで、描画コンテキストをデフォルト状態にリセットします。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク