HTMLキャンバス図面
JavaScriptでキャンバスに描く
HTMLキャンバスへのすべての描画は、JavaScriptを使用して行う必要があります。
例
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
ステップ1：キャンバス要素を見つける
まず、<canvas>要素を見つける必要があります。
これは、HTML DOMメソッドgetElementById（）を使用して実行されます。
var canvas = document.getElementById("myCanvas");
ステップ2：図面オブジェクトを作成する
次に、キャンバスの描画オブジェクトが必要です。
getContext（）は組み込みのHTMLオブジェクトであり、描画用のプロパティとメソッドがあります。
var ctx = canvas.getContext("2d");
ステップ3：キャンバスに描画する
最後に、キャンバスに描画できます。
描画オブジェクトの塗りつぶしスタイルを赤に設定します。
ctx.fillStyle = "#FF0000";
fillStyleプロパティは、CSSカラー、グラデーション、またはパターンにすることができます。デフォルトのfillStyleは黒です。
fillRect（x、y、width、height）メソッドは、塗りつぶしスタイルで塗りつぶされた長方形をキャンバスに描画します。
ctx.fillRect(0, 0, 150, 75);