React + TypeScriptでcanvas属性を扱う方法

こんにちはかみむらです。React + TypeScriptでcanvas属性を扱いたかったが、getContextがTypeScriptの型エラーに引っかかってしまい解決するのに時間がかかってしまいました。なので今回はReact + TypeScriptでcanvas属性を扱うためのテンプレートを残しておきます。

コードの全体像

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

function Canvas() {
  const canvasRef = useRef(null);

  const getContext = (): CanvasRenderingContext2D => {
    const canvas: any = canvasRef.current;

    return canvas.getContext('2d');
  };

  useEffect(() => {
    const ctx: CanvasRenderingContext2D = getContext();
    ctx.fillRect(0,0, 100, 100);
    ctx.save();
  })

  return (
    <div>
      <canvas className="canvas" ref={canvasRef} />
    </div>
  );
}

export default Canvas;

stackblitz.com