有没有一种方法可以用Canvas在react.js中点击一个按钮就能画出一些东西？

npm install canvas

import React, { useRef, useEffect } from 'react';
import Canvas from 'canvas';

const MyComponent = () => {
  const canvasRef = useRef(null);

  const drawSomething = () => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');

    // 绘制代码
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, 100, 100);
  };

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');

    // 初始化Canvas大小
    canvas.width = 500;
    canvas.height = 500;

    // 绘制初始内容
    ctx.fillStyle = 'blue';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }, []);

  return (
    <div>
      <button onClick={drawSomething}>绘制</button>
      <canvas ref={canvasRef} />
    </div>
  );
};

export default MyComponent;