コードはこちら
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
Canvas API は JavaScript と HTML の <canvas> 要素によってグラフィックを描く方法を提供します。他にも、アニメーション、ゲームのグラフィック、データの可視化、写真加工、リアルタイム動画処理などに使用することができます。 Canvas API は全体的に 2D グラフィックを対象としています。 WebGL API は、こちらも <canvas> 要素を使用して、ハードウェアで高速化された 2D および 3D グラフィックを描きます。
Canvas API の CanvasRenderingContext2D インターフェイスは、<canvas> 要素に描画するための 2D レンダリングコンテキストを提供します。図形、文字、画像、その他のオブジェクトを描画するのに使用します。 詳細は、サイドバーや以下にあるプロパティとメソッドの説明を参照してください。Canvas チュートリアル にもより多くの説明やサンプルコード、リソースがあります。
線や円を書くメソッドを持ったオブジェクト(JavaScriptの組み込みオブジェクト)
組み込みオブジェクトとは？ → 最初から言語機能として用意してある便利なクラスなどのこと
fillRect drawImage などのメソッドがある
canvas要素にid="canvas" を設定しておいてください(名前は任意です)
const canvas = document.getElementById("canvas")
const context = canvas.getContext("2d")
context.fillRect(0,0,100,100)
drawImage は、Imageクラスのインスタンス(img 要素)を受け取って、その画像を描画する CanvasRenderingContext2D の持つメソッド
let img1 = new Image()
img1.src = "<https://storage.tenki.jp/storage/static-images/suppl/article/image/2/27/277/27740/1/large.jpg>"
img1.onload = () => {
ctx.drawImage(img1, 0, 0, 180, 180)
}
試してみよう！動作を確認してみよう。