How to fill canvas wheel of fortune with images?

Viewed 85

I have wheel of fortune, which has it's segments filled with colors at the moment:

const colors = ['#F00', '#F80', '#FF0', '#0C0', 'rgba(255, 255, 255, 0.5)', '#00F', '#F0F'];

<..>

for (let a = 0; a < Math.TAU; a += Math.TAU / steps) {
  const aa = a - Math.PI / steps;
  ctx.fillStyle = colors[colIdx++ % colors.length];
  ctx.beginPath();
  ctx.moveTo(s2, s2);
  ctx.arc(s2, s2, r, aa, aa + Math.TAU / steps);
  ctx.fill();
}

enter image description here

How can I change colors with images? For example if I had this array of images that I would like to fill canvas with?

const colors = [
  'https://via.placeholder.com/150',
  'https://via.placeholder.com/150',
  'https://via.placeholder.com/150',
  'https://via.placeholder.com/150',
  'https://via.placeholder.com/150',
  'https://via.placeholder.com/150',
];
0 Answers
Related