canvas要素に矩形（長方形）を描画する

canvas要素に矩形（長方形）を描画するには、context.rectまたはcontext.fillRectまたはcontext.strokeRectメソッドを使用します。

canvas要素で扱う図形は基本的に塗りつぶす場合はcontext.fill、輪郭線を描く場合はcontext.strokeを使用しますが、矩形（長方形）のみ専用のメソッドが用意されています。

// 塗りつぶし
context.fillRect(x, y, width, height);

// 輪郭線
context.strokeRect(x, y, width, height);

HTML

<canvas width="150" height="150" id="sample"></canvas>

JavaScript

var canvasElem = document.getElementById('sample'),
    ctx        = canvasElem.getContext('2d');

ctx.fillRect(25, 25, 100, 100);

左から輪郭線、塗りつぶしのデモです。