Edit in JSFiddle

const WIDTH = 500;
const HEIGHT = 500;

//
// 前準備。
//

// canvas要素を作る。
const canvas = document.createElement('canvas');
canvas.width = WIDTH;
canvas.height = HEIGHT;

// コンテキストを取得しておく。
const context = canvas.getContext('2d');

// body要素に追加する。
document.body.appendChild(canvas);

//
// メイン処理。
//

// 表示する円を管理する配列を作成しておく。
// 少ない場合(1個とか2個とか)はいらないかも。
const circles = [];

// 円を追加する。
// ここでは円はx,y,radius(半径)を持ったオブジェクト。
// 単なるオブジェクトのかわりにCircleクラスを作っても良いかも。
circles.push({x:150, y:150, radius: 50});
circles.push({x:350, y:350, radius: 50});

// 各円を描画する。
for(const c of circles) {
  context.beginPath();
  context.fillStyle = 'rgb(0, 0, 0)'; // 黒色
  context.arc(c.x, c.y, c.radius, 0, 2 * Math.PI);
  context.fill();
}