Canvas（描画）
canvas getContext 2d
Canvas APIを使って2Dグラフィクスを描画します。お絵かき・チャート・画像処理など幅広く活用されます。
デモ：お絵かきキャンバス
マウスでドラッグして描画・「デモ描画」で図形の描画例を表示
コード例
js
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// 矩形
ctx.fillStyle = '#3b82f6';
ctx.fillRect(10, 10, 100, 60); // 塗りつぶし
ctx.strokeStyle = '#000';
ctx.strokeRect(10, 10, 100, 60); // 枠線のみ
ctx.clearRect(20, 20, 40, 30); // 消去
// 円・弧
ctx.beginPath();
ctx.arc(200, 50, 40, 0, Math.PI * 2); // 完全な円
ctx.arc(200, 50, 40, 0, Math.PI); // 半円
ctx.fillStyle = 'red';
ctx.fill();
ctx.stroke();
// パス（直線・曲線）
ctx.beginPath();
ctx.moveTo(10, 100);
ctx.lineTo(100, 150);
ctx.quadraticCurveTo(200, 50, 300, 150); // 二次ベジェ
ctx.bezierCurveTo(100, 50, 200, 50, 300, 100); // 三次ベジェ
ctx.closePath();
ctx.stroke();
// テキスト
ctx.font = '24px sans-serif';
ctx.fillStyle = '#333';
ctx.fillText('Hello Canvas!', 10, 200);
ctx.strokeText('Hello Canvas!', 10, 230);
// グラデーション
const grad = ctx.createLinearGradient(0, 0, 300, 0);
grad.addColorStop(0, '#f59e0b');
grad.addColorStop(1, '#ec4899');
ctx.fillStyle = grad;
// 画像の描画
const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0, 200, 150);
img.src = '/image.png';
// Canvasをデータに変換
canvas.toDataURL('image/png'); // Base64データURL
canvas.toBlob(blob => downloadBlob(blob), 'image/png');NEWOffscreenCanvas（Web Worker での描画）
メインスレッドをブロックせずにWeb Workerで描画処理を行えます。重い画像処理・ゲームに有効です。
js
// メインスレッド
const canvas = document.querySelector('canvas');
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker('draw-worker.js');
worker.postMessage({ canvas: offscreen }, [offscreen]);
// draw-worker.js（Web Worker内）
self.onmessage = ({ data: { canvas } }) => {
const ctx = canvas.getContext('2d');
// Worker内で描画（メインスレッドをブロックしない）
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 100, 100);
// 大量処理も安全
for (let i = 0; i < 1000000; i++) {
// 重い計算...
}
};
// ブラウザ対応: Chrome 69+, Firefox 105+🤖 AIプロンプトテンプレート
以下の要件を満たすTypeScript + Reactコンポーネントを作成してください。 - Canvas APIを使ったお絵描きアプリのサンプルを示す - マウス・タッチイベントでフリーハンド描画する機能を含める - 線の太さ・色を変更できるツールバーのサンプルを含める - 描画内容をPNG画像としてダウンロードする機能を示す - Canvasのクリア・元に戻す（Undo）機能のサンプルを含める - コメントは日本語で記述する
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。