const upload = document.getElementById('upload');
const download = document.getElementById('download');
const reset = document.getElementById('reset');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
- HTMLのボタンやキャンバス要素を取得して、それぞれ変数に代入
ctxはCanvasに絵を描くための「ペン」
① const upload = document.getElementById('upload');
意味
- HTML内にある
<input type="file" id="upload">
という「ファイルアップロードボタン」を探して、取得する
- それをuploadという名前の変数に保存している
なぜ必要？
- ファイルが選ばれたときに「何か処理」をしたいから
- たとえば → 画像を読み込む処理
ポイント
document.getElementById() は「HTMLのIDで要素を探す」命令- IDは
"upload" と指定している（HTMLと一致している）
② const download = document.getElementById('download');
意味
- HTML内の
<button id="download">保存する</button>
という「保存ボタン」を探して、取得する
- それをdownloadという名前の変数に保存している
なぜ必要？
- 「保存する」ボタンを押したときに、
Canvas上の画像を自動ダウンロードできるようにするため
ポイント
- ボタンを押したときの動きをプログラムで作れるようにするため
③ const reset = document.getElementById('reset');
意味
- HTML内の
<button id="reset">リセット</button>
という「リセットボタン」を探して、取得する
- それをresetという名前の変数に保存している
なぜ必要？
- 「リセット」ボタンを押したときに、
加工前の元画像に戻せるようにするため
ポイント
- 「加工したけどやり直したい」というときに役立つ機能を作るために使う
④ const canvas = document.getElementById('canvas');
意味
- HTML内の
<canvas id="canvas"></canvas>
という「描画スペース」を探して、取得する
- それをcanvasという名前の変数に保存している
なぜ必要？
- 画像を描いたり、ぼかしたり、保存したりするのは全部Canvasの中でやるから
ポイント
canvasは、自由に絵や画像を扱える特別な領域- Webアプリやゲームでもよく使われる
⑤ const ctx = canvas.getContext('2d');
意味
- さっき取ったCanvasから「2D描画モード」を取得して、ctxという変数に保存する
ctxは「コンテキスト」と呼ばれる- 要するに「Canvasに実際に描くためのペンと道具箱」を手に入れる
なぜ必要？
- Canvasだけだとただの白い紙
ctxを使って、初めて
- 線を描く
- 四角を描く
- 画像を貼る
- フィルター（ぼかし）をかける などができるようになる
ポイント
getContext('2d') で2D用の道具を使えるようにしているctxを使わないとCanvasには何も描けない
