Canvas は、HTML5 で新たに導入された canvas 要素に図を描画します。そのため、まず、事前に canvas 要素を用意する必要があります。
canvas 要素のマークアップ例
<canvas></canvas>
canvas 要素のマークアップ例のサンプル
ここでは、中身を何も用意していないため、何も表示されていません。
canvas 要素には、Canvas 領域に幅を表す width コンテンツ属性と、高さを表す height コンテンツ属性が規定されます。これらに指定する値は数値でなければいけません。そして、その長さの単位はピクセルです。
これらの属性は必須ではありません。もし指定しなければ、デフォルト値が適用され、width は 300、height は 150 となります。
ブラウザは、canvas 要素の準備ができると、透明な黒で全体を塗りつぶした状態でレンダリングします。そのため、canvas に何も描かなければ、ページの背景が透けた状態になります。
次に、用意した Canvas 要素に図形を描画するために、JavaScript を使用するので、JavaScript の指示がどの要素に対するものか明確にするための名前を付けます。
canvas 要素のマークアップ例
<canvas id="myCanvas"></canvas>
ここでは、「 myCanvas 」と名前を付けました。
次からは、canvas 要素に描画するための JavaScript を準備していきます。
まず、関数（function）を準備し、ここでは「 draw() 」と名前を付けました。
canvas 要素に描画するための JavaScript
<script>
function draw() {
};
</script>
用意した関数を、body 要素で onLoad イベントを使って呼び出します。
canvas 要素に描画するための JavaScript を呼び出すためのマークアップ例
<html>
<head>
<script>
function draw() {
};
</script>
</head>
<body onload="draw();">
<canvas id="myCanvas"></canvas>
</body>
</html>
次に、変数 canvas を用意し、getElementById メソッドを使って、上で名前を付けた canvas 要素の ID（myCanvas）を取得します。
canvas 要素に描画するための ID を取得する JavaScript
<script>
function draw() {
const canvas = document.getElementById('myCanvas');
};
</script>
さらに、変数 context を用意し、canvas 要素で描画方法を指定するための getContext() メソッドを呼び出します。他の描画方法もありますが、ここでは 2D での描画方法を指定します。
<script>
function draw() {
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
};
</script>
これで、canvas 要素に図形を描画するための準備ができましたので、短形を描画するための fillRect メソッドを使ってみます。
<script>
function draw() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillRect(25, 25, 100, 100);
}
</script>
canvas 要素の描画サンプル
ここまでで、黒い正方形が描画されたと思います。色が黒いのは、キャンバスに描画される要素のデフォルトの色が黒だからです。
ちなみに fillRect メソッドを書き直すと次のようになります。
fillRect(x, y, width, height);
それぞれ、
を、意味し、ピクセル単位で指定します。