HTMLキ canvas へのすべての描画は、JavaScript で行わなければなりません：
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Try it Yourself »
まず、<canvas> を探さなければなりません。
これは、HTML DOM メソッドの getElementById() を使用して行います：
var canvas = document.getElementById("myCanvas");
次は、キャンバス用の描画オブジェクトが必要です。
getContext() は、描画のためのプロパティとメソッドを備えた組込みの HTML オブジェクトです：
var ctx = canvas.getContext("2d");
これで、キャンバスに描画することができます。
描画オブジェクトの塗りつぶしスタイルに赤色を設定します：
ctx.fillStyle = "#FF0000";
fillStyle プロパティは、CSSの色、グラデーション、またはパターンにすることができます。 デフォルトの fillStyle は黒です。
fillRect(x,y,width,height) メソッドは、塗りつぶしスタイルで塗りつぶされた矩形をキャンバス上に描画します：
ctx.fillRect(0,0,150,75);