JSFiddle - React, Tailwind, and code Playground

by brunolm

HTML

<canvas id="canvas" width="800px" height="800px"></canvas>

JavaScript

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

const circleRadius = 15
ctx.beginPath();
ctx.arc(200, 200, circleRadius, 0, 2 * Math.PI);
ctx.fillStyle = 'red'
ctx.fill()

const imageLink = 'https://i.imgur.com/l6c1b3b.png'
const buttonImage = new Image()
buttonImage.width='15px'
buttonImage.height='15px'
buttonImage.src= imageLink


function renderButtons({
  ctx,
  node,
  images,
}) {
  const numButtons = images.length
  const gap = 0 // 0.01 * Math.PI
  let startAngle = 1.5 * Math.PI + gap
  let endAngle = startAngle + (1 / numButtons) * 2 * Math.PI - gap

  for (let i = 0; i < numButtons; i++) {
    ctx.beginPath()
    ctx.arc(node.x, node.y, 30, startAngle, endAngle)
    ctx.arc(node.x, node.y, 16, endAngle, startAngle, true)
    ctx.closePath()
    ctx.fillStyle = '#7c7c7c'
    ctx.fill()

    const centerAngle = (startAngle + endAngle) / 2
    const radius = 22
    const centerX = node.x + radius * Math.cos(centerAngle)
    const centerY = node.y + radius * Math.sin(centerAngle)
    ctx.drawImage(
      images[i].img,
      centerX - 4, // - buttonImages[i].img.width / 2,
      centerY - 4, // - buttonImages[i].img.height / 2,
      8,
      8,
    )

    startAngle = endAngle + gap
    endAngle = startAngle + (1 / numButtons) * 2 * Math.PI - gap
  }
}

renderButtons({
  ctx,
  node: { x: 200, y: 200},
  images: [
    { img: buttonImage },
    { img: buttonImage },
    { img: buttonImage },
  ]
})


function getClickedArea(x, y) {
    var centerX = 200, centerY = 200;
    var dx = x - centerX;
    var dy = y - centerY;
    var distance = Math.sqrt(dx * dx + dy * dy);
    console.log(distance)
    if (distance > circleRadius && distance <= 75) {
        var angle = Math.atan2(dy, dx) * 180 / Math.PI;
        if (angle < 0) angle = 360 + angle;
        if ((angle >= 270 && angle < 360)
           || (angle >= 0 && angle < 30)) return 'Blue';
      if (angle >= 30 && angle < 150) return 'Green';  
      if (angle >= 150...