ブラウザの画面に絵を描いたり、画像を加工したりするとき、裏側でよく使われているのが HTML Canvas API です。HTMLに <canvas> タグを置くと、JavaScriptでそこに図形・文字・画像を自由に描けます。
AIツールの「Canvas」とは全くの別物です。AIツールとしてのCanvasは Canvas（AIツール） を参照してください。
仕組み
<canvas> タグは「何も書かれていない白紙のキャンバス」のようなものです。JavaScriptから getContext('2d') という命令でペンを受け取り、そこに描き込んでいきます。
<!-- HTMLにキャンバスを置く -->
<canvas id="myCanvas" width="400" height="300"></canvas>
// JavaScriptでペンを受け取り、四角を描く
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'royalblue'; // 色を指定
ctx.fillRect(50, 50, 200, 100); // 四角を描く（x, y, 幅, 高さ）
画像圧縮への応用
「Canvasを使って画像を圧縮する」という話をよく耳にするのは、この仕組みのためです。
手順
<img>タグやFileオブジェクトから画像を読み込む- Canvas に
drawImage()で画像を描き込む（このとき幅・高さを縮小できる） canvas.toBlob('image/jpeg', 0.8)で「JPEG品質80%」のデータに変換する
function compressImage(file, quality = 0.8) {
return new Promise((resolve) => {
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
// Canvasに画像を描き込む
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
// JPEG形式・品質80%で書き出す
canvas.toBlob(resolve, 'image/jpeg', quality);
};
img.src = URL.createObjectURL(file);
});
}
quality を 0.0（最低画質）〜 1.0（最高画質）で指定でき、ファイルサイズを大幅に削減できます。
主な用途
| 用途 | 具体例 |
|---|---|
| 画像圧縮・変換 | アップロード前にファイルサイズを削減、PNGをJPEGに変換 |
| グラフ・チャート描画 | データを棒グラフや円グラフで可視化 |
| ゲーム開発 | ブラウザゲームの描画エンジン |
| 動画フレーム処理 | 動画の特定フレームを画像として取り出す |
| QRコード・バーコード生成 | 動的にコードを描画する |
WebGL（3D描画）との違い
getContext('2d') は平面（2D）の描画向けですが、getContext('webgl') を使うと 3D グラフィックも描けます。これは WebGL と呼ばれ、ブラウザ上で動く 3D ゲームや地図アプリ（Google Maps の 3D ビューなど）に使われています。
公式ドキュメント
このサイトでの使われ方
このサイト（arismmn）では、Cloudinary に画像をアップロードする際のクライアントサイド前処理としてHTML Canvas APIを利用することがあります。大きな画像をそのまま送信するとアップロードに時間がかかるため、Canvas で縮小・圧縮してからアップロードすることでユーザーの待ち時間を短縮します。
