import React, { useEffect, useRef } from "react";

import React, { useEffect, useRef, useState } from "react";

 * @param props 

 * @param props

  const [counter, setCounter] = useState(0);

  const [width, height, pixelRatio] = [100, 100, 1.0];

  const [width, height, pixelRatio] = [200, 100, 1.0];
  useEffect(() => {
    const current: HTMLCanvasElement = canvasRef.current!;
    current.onclick = (e) => {
      console.log(e);
    };
  }, []);

    if (!counter) {
      initialBackground();
    }

    ctx.save();
    ctx.scale(pixelRatio, pixelRatio);
    ctx.fillStyle = "hsl(0, 0%, 95%)";
    ctx.fillRect(0, 0, width, height);

    ctx.arc(width / 2, height / 2, width / 4, 0, Math.PI * 2);

    ctx.arc(width / 2 + counter, height / 2, width / 4, 0, Math.PI * 2);

    ctx.restore();
  });

  }, [counter]);

  const initialBackground = () => {
    const canvas: HTMLCanvasElement = canvasRef.current as any;
    const ctx = canvas.getContext("2d")!;
    ctx.save();
    ctx.scale(pixelRatio, pixelRatio);
    ctx.fillStyle = "hsl(0, 0%, 95%)";
    ctx.fillRect(0, 0, width, height);
    ctx.restore();
  };

        console.log(e.target);
        setCounter((count) => count + 1);