Draw Player O

example2-draw-player-o.tsx

const BOARD_SIZE = 208 as const;
const BOARD_PADDING = 4 as const;
const LINE_WIDTH = 8 as const;
const LINE_CAP_SIZE = LINE_WIDTH / 2;
const CELL_SIZE = 64 as const;
const CELL_PADDING = 4 as const;
const CELL_CENTER = CELL_SIZE / 2;
const COLOR1 = '#FFD103';
const COLOR2 = '#A303FF';
const COLOR3 = '#CCCCCC';

function PlayerOCanvas(
  props: React.DetailedHTMLProps<
    React.CanvasHTMLAttributes<HTMLCanvasElement>,
    HTMLCanvasElement
  >
) {
  const canvas = useRef<HTMLCanvasElement>(null)

  useEffect(
    () => {
      const lineExternalWidth = LINE_WIDTH / 2;
      const radius = CELL_CENTER - BOARD_PADDING - LINE_CAP_SIZE - CELL_PADDING - lineExternalWidth;
      const startAngle = 0;
      const endAngle = 2 * Math.PI;

      const context = canvas.current!.getContext('2d')!;
      context.lineWidth = LINE_WIDTH;
      context.strokeStyle = COLOR2;

      context.beginPath();

      context.arc(CELL_CENTER, CELL_CENTER, radius, startAngle, endAngle);

      context.stroke();

    },
    [canvas]
  )

  return (
    <canvas
      {...props}
      height={CELL_SIZE}
      width={CELL_SIZE}
      ref={canvas}
    />
  )
}