AndruhaLive

Надо внутри цикла заменить translate на rotate. И не забыть сделать translate перед циклом - это чтобы круг был виден целиком. Типа так:

<canvas width="400" height="400"></canvas>

const canvas = document.querySelector('canvas');
const w = canvas.width;
const h = canvas.height;
const ctx = canvas.getContext('2d');

ctx.translate(w / 2, h / 2);
ctx.fillStyle = 'red';

const steps = 30;

for (let i = 0; i < steps; i++) {
  ctx.beginPath();
  ctx.arc(w / 4, h / 4, 5, 0, 2 * Math.PI, false);
  ctx.rotate(2 * Math.PI / steps);
  ctx.fill();
  ctx.closePath();
}