Fabric.jsでCanvasを「オブジェクト」として扱えるようになる話

はじめに

HTML5のCanvasで図形を描いたあと、「この四角形をマウスでドラッグして動かしたい」と思ったことはありませんか？素のCanvas APIは一度描いたらただのピクセルの集まりになってしまうため、「どの図形がクリックされたか」を判定するだけでも座標計算のコードを大量に書く必要があります。

そんな悩みを一気に解決してくれるのが Fabric.js です。Canvasの上に「オブジェクトモデル」というレイヤーを被せることで、図形やテキストや画像を「あとから選択・移動・変形できるオブジェクト」として扱えるようになります。しかも移動・拡大縮小・回転のためのハンドルUIまで標準で付いてくるのです。

この記事では、2026年時点の最新バージョン（v7系）をベースに、Fabric.jsの基本から実践的な使い方までを解説します。

Fabric.jsとは

Fabric.jsは、HTML5 Canvasにインタラクティブなオブジェクトモデルを提供するJavaScriptライブラリです。SVGからCanvasへ、CanvasからSVGへの相互変換パーサーも備えており、画像エディタやデザインツールのようなアプリケーションを短いコードで構築できます。

2011年から開発が続く老舗ライブラリでありながら、v6で完全なTypeScript化とESモジュール対応を果たし、現在もセキュリティ修正を含めて活発にメンテナンスされています。

主な特徴

対話型オブジェクトモデル - 図形・テキスト・画像を「オブジェクト」として管理し、選択・移動・拡大縮小・回転・スキュー（歪み）のコントロールUIが標準搭載されています
Canvas上でのテキスト編集 - ダブルクリックでその場編集できるリッチテキストをサポートし、IME（日本語入力）にも対応しています
SVG相互変換 - SVGを読み込んでCanvasオブジェクトにしたり、Canvasの内容をSVGとして書き出したりできます
画像フィルター - WebGL/Canvas2Dベースのフィルター（グレースケール、ぼかし、明度調整など）を組み合わせて適用できます
シリアライズ機能 - キャンバス全体をJSONとして保存・復元できるため、「編集の続きから再開」が簡単に実装できます
TypeScriptファースト - v6以降は型定義が本体に同梱され、ツリーシェイキングにも対応しています

インストール

各パッケージマネージャーでインストールできます。

# npm
npm install fabric

# yarn
yarn add fabric

# pnpm
pnpm add fabric

Node.js環境（サーバーサイドでの画像生成など）でも動作します。その場合はNode.js 18以上が必要で、内部的に node-canvas と jsdom を利用します。

なお、v6以降はimport構文が変わりました。v5までの import { fabric } from 'fabric' ではなく、名前付きインポートを使います。

// ブラウザ環境（v6以降）
import { Canvas, Rect } from 'fabric';

// Node.js環境
import { StaticCanvas, Rect } from 'fabric/node';

基本的な使い方

まずは「ドラッグで動かせる四角形」を表示してみましょう。HTMLに canvas 要素を1つ用意するだけで始められます。

<canvas id="my-canvas" width="600" height="400"></canvas>

import { Canvas, Rect, Circle } from 'fabric';

// Canvas要素をFabric.jsの管理下に置く
const canvas = new Canvas('my-canvas', {
  backgroundColor: '#f5f5f5',
});

// 赤い四角形を作成
const rect = new Rect({
  left: 100,
  top: 100,
  width: 120,
  height: 80,
  fill: '#e74c3c',
  rx: 8, // 角丸
  ry: 8,
});

// 青い円を作成
const circle = new Circle({
  left: 300,
  top: 150,
  radius: 50,
  fill: '#3498db',
});

canvas.add(rect, circle);

たったこれだけで、四角形と円がキャンバスに描画され、マウスでクリックして選択・ドラッグ移動・角のハンドルで拡大縮小・回転まで全部できるようになります。素のCanvas APIで同じことをしようとすると数百行は必要になるので、この手軽さがFabric.js最大の魅力です。

イベント処理

オブジェクトの操作にはイベントで反応できます。

// オブジェクトが移動されたとき
canvas.on('object:moving', (e) => {
  console.log('移動中:', e.target.left, e.target.top);
});

// オブジェクトが選択されたとき
canvas.on('selection:created', (e) => {
  console.log('選択されたオブジェクト数:', e.selected.length);
});

編集可能なテキスト

Textbox を使うと、ダブルクリックでその場編集できるテキストを配置できます。

import { Textbox } from 'fabric';

const textbox = new Textbox('ダブルクリックで編集できます', {
  left: 100,
  top: 250,
  width: 300,
  fontSize: 24,
  fontFamily: 'sans-serif',
  fill: '#2c3e50',
});

canvas.add(textbox);

日本語入力（IME）にも対応しているので、日本語圏向けのツールでも安心して使えます。

アニメーション

プロパティの変化をアニメーションさせることもできます。

rect.animate(
  { angle: 360 },
  {
    duration: 1000,
    onChange: () => canvas.renderAll(),
  }
);

実践的なユースケース

Fabric.jsが真価を発揮するのは、「ユーザーが自由に編集できるキャンバス」を作るときです。ここでは、シンプルな画像注釈ツール（アップロードした画像に図形やテキストを載せて保存する）の骨格を作ってみます。

import { Canvas, FabricImage, Rect, Textbox, PencilBrush } from 'fabric';

const canvas = new Canvas('annotation-canvas', {
  width: 800,
  height: 600,
});

// 1. 画像を読み込んで背景として配置
async function loadImage(url: string) {
  const img = await FabricImage.fromURL(url);
  img.scaleToWidth(800);
  img.selectable = false; // 背景画像は動かせないようにする
  canvas.add(img);
  canvas.sendObjectToBack(img);
}

// 2. 注釈用の枠を追加するボタン処理
function addAnnotationBox() {
  const box = new Rect({
    left: 200,
    top: 200,
    width: 150,
    height: 100,
    fill: 'transparent',
    stroke: '#e74c3c',
    strokeWidth: 3,
  });
  canvas.add(box);
  canvas.setActiveObject(box);
}

// 3. フリーハンド描画モードの切り替え
function toggleDrawingMode(enabled: boolean) {
  canvas.isDrawingMode = enabled;
  if (enabled) {
    canvas.freeDrawingBrush = new PencilBrush(canvas);
    canvas.freeDrawingBrush.color = '#e67e22';
    canvas.freeDrawingBrush.width = 4;
  }
}

// 4. 編集内容をJSONとして保存
function saveCanvas(): string {
  return JSON.stringify(canvas.toJSON());
}

// 5. 保存したJSONから復元
async function restoreCanvas(json: string) {
  await canvas.loadFromJSON(json);
  canvas.renderAll();
}

// 6. PNG画像として書き出し
function exportAsImage(): string {
  return canvas.toDataURL({ format: 'png', multiplier: 2 });
}

わずかこれだけのコードで、以下の機能が揃った注釈ツールの土台が完成します。

画像の読み込みと背景固定
ドラッグで動かせる注釈枠の追加
フリーハンドのペン描画
編集状態のJSON保存・復元
高解像度PNGへの書き出し

toJSON() / loadFromJSON() によるシリアライズ機能のおかげで、「編集内容をデータベースに保存して後で再編集」という要件も自然に実現できます。デザインエディタ、ホワイトボード、帳票デザイナー、画像加工ツールなど、応用範囲は非常に広いです。

画像フィルターの適用

画像加工ツールを作るなら、組み込みフィルターも便利です。

import { FabricImage, filters } from 'fabric';

const img = await FabricImage.fromURL('/sample.jpg');
img.filters = [
  new filters.Grayscale(),
  new filters.Brightness({ brightness: 0.1 }),
];
img.applyFilters();
canvas.add(img);