example 2 board canvas

example2-board-canvas.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 BoardCanvas(
  props: React.DetailedHTMLProps<
    React.CanvasHTMLAttributes<HTMLCanvasElement>,
    HTMLCanvasElement
  >
) {

  const canvas = useRef<HTMLCanvasElement>(null)

  useEffect(
    () => {

      const lineLength = BOARD_SIZE - BOARD_PADDING - LINE_CAP_SIZE;
      const fistSquare = CELL_SIZE + BOARD_PADDING;
      const secondSquare = (2 * CELL_SIZE) + BOARD_PADDING + LINE_CAP_SIZE;
      const lineDistanceFromBoardEdge = BOARD_PADDING + LINE_CAP_SIZE;

      const context = canvas.current!.getContext('2d')!;

      context.lineWidth = LINE_WIDTH;
      context.lineCap = 'round';
      context.strokeStyle = COLOR3;

      context.beginPath();

      // vertical
      context.moveTo(fistSquare, lineDistanceFromBoardEdge);
      context.lineTo(fistSquare, lineLength);

      context.moveTo(secondSquare, lineDistanceFromBoardEdge);
      context.lineTo(secondSquare, lineLength);

      // horizontal
      context.moveTo(lineDistanceFromBoardEdge, fistSquare);
      context.lineTo(lineLength, fistSquare);

      context.moveTo(lineDistanceFromBoardEdge, secondSquare);
      context.lineTo(lineLength, secondSquare);

      context.stroke();
    },
    [canvas]
  )

  return (
    <canvas
      {...props}
      height={BOARD_SIZE}
      width={BOARD_SIZE}
      style={{
        ...props.style,
        backgroundColor: '#fff',
        boxShadow: '5px 5px 5px 0px rgba(0,0,0,0.75)',
      }}
      ref={canvas}
    />
  )
}