CreateJsを使って四角と角丸四角をcanvasに描いてみます。

リファレンスはいろいろな形のシェイプを描画するまでのCreateJS基礎にて参照。

JavaScript

var stage;

function init() {
  // ステージオブジェクト作成
  stage = new createjs.Stage('myCanvas');
  // シェイプ作成
  var shapeA = new createjs.Shape();
  var shapeB = new createjs.Shape();
  // 表示リストに追加
  stage.addChild(shapeA);
  stage.addChild(shapeB);
  // 座標
  shapeA.x = 50;
  shapeA.y = 50;
  shapeB.x = 50;
  shapeB.y = 50;
  // 描画
  drawA(shapeA.graphics);
  drawB(shapeB.graphics);
}

// ランダムカラー生成
function randColorCreate () {
  var randNum = Math.floor(Math.random() * 0xFFFFFF);
  var randColor = createjs.Graphics.getRGB(randNum);
  return randColor;
}

// 四角
function drawA (myGraphics) {
  var color = randColorCreate();
  // 塗り
  // drawRect(X, Y, 幅, 高さ)
  myGraphics.beginFill(color).drawRect(0, 0, 50, 50);
  // 更新
  stage.update();
}

// 角丸四角
function drawB (myGraphics) {
  var color = randColorCreate();
  // drawRoundRect(X, Y,幅, 高さ, 角丸の幅, 角丸の高さ)
  myGraphics.beginStroke(color).setStrokeStyle(3).drawRoundRect(100, 100, 50, 50, 10, 10);
  //
  stage.update();
}

init();