Canvasについて

Canvasの扱い方。

⓪canvasタグを使いオブジェクトを生成
<canvas id = "myCanvas" width = "150" height = "150"></canvas>

①getElementByIdでキャンバスオブジェクトを取得
const canvas = document.getElementById("myCanvas");

②キャンバスのプロパティを操作できるように設定
const ctx = canvas.getContext('2d');

③ctx.〇〇 = ** でプロパティの値を編集

ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
ctx.fillRect(30, 30, 50, 50);

オブジェクト生成
↓
オブジェクト取得
↓
オブジェクトのプロパティ設定
↓
オブジェクトのプロパティ操作