Fabric.jsでマウスクリック時にHTML5 Canvasレイヤーが消える・Firefoxがフリーズする問題の解決法

Fabric.jsで発生する主な問題：Canvasレイヤーの消失とFirefoxのフリーズ

Fabric.jsを利用したWebアプリケーション開発では、いくつか特有のトラブルに遭遇することがあります。代表的なのが以下の2つです。

• マウスクリックのタイミングでHTML5 Canvasレイヤーが消えてしまう
• Firefoxで画像からキャンバスを作成する際、ブラウザが応答しなくなる（フリーズする）

これらの問題は、画像の読み込みやレンダリングの処理方法に起因していることが多く、実装アプローチを見直すことで回避できます。

解決策：画像のドラッグ＆ドロップ機能を実装する

効果的な対処法のひとつは、ユーザーのコンピューターから画像をドラッグ＆ドロップでキャンバス上に配置できる仕組みを実装することです。ページ読み込み時の重い画像処理を減らせるため、Firefoxでのフリーズなどの不具合も起こりにくくなります。

ステップ1：img要素にdraggable属性を設定する

まず、ドラッグしたい画像要素に対して、draggable属性を「true」に設定します。

<img draggable="true">

この一行を加えるだけで、ブラウザ標準のドラッグ＆ドロップ機能が有効になり、ユーザーがローカルの画像ファイルをつかんで自由に移動できるようになります。

ステップ2：ドロップイベントをFabric.jsで受け取る

続いて、キャンバス側でドロップされたファイルを受け取り、Fabric.jsの画像オブジェクトとして追加します。

const canvas = new fabric.Canvas('c');

canvas.wrapperEl.addEventListener('drop', function (e) {
  e.preventDefault();
  const file = e.dataTransfer.files[0];
  const reader = new FileReader();

  reader.onload = function (event) {
    fabric.Image.fromURL(event.target.result, function (img) {
      canvas.add(img);
      canvas.centerObject(img);
      canvas.renderAll();
    });
  };

  reader.readAsDataURL(file);
}, false);

// ブラウザ既定の挙動を無効化しておく
['dragover', 'dragenter'].forEach(function (evt) {
  canvas.wrapperEl.addEventListener(evt, function (e) {
    e.preventDefault();
  }, false);
});

このコードでは、ドロップされたファイルをFileReaderでData URLとして読み込み、fabric.Image.fromURL()メソッドでFabric.jsの画像オブジェクトに変換してからキャンバスに追加しています。centerObject()を併用すれば、追加した画像を自動的に中央へ配置することも可能です。

なお、Fabric.jsは内部でキャンバス要素をラッパー要素で包むため、イベントはwrapperElに対して登録するのが確実です。あわせてdragoverやdragenterの既定動作を無効化しておくと、ドロップが確実に受け付けられます。

まとめ

Fabric.jsでCanvasレイヤーが消える問題やFirefoxのフリーズに悩まされている場合は、画像のドラッグ＆ドロップによる読み込み方式への切り替えを検討してみてください。draggable="true"の設定とdropイベントのハンドリングを組み合わせることで、より安定し、操作性の高いキャンバスアプリケーションを構築できます。