TypeScriptでCanvas

結論：下記のように書く
今回は斜線をcanvasで描いている

import { FC } from "react";


export const Canvas:FC = () => {



    const canvas= document.getElementById("canvas-in") as HTMLCanvasElement;
    if (canvas) {
        
        canvas.width = 200;
        const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
        canvas.width = 300;
        canvas.height = 300;

        ctx.beginPath();
        ctx.moveTo(50,50);
        ctx.lineTo(150,150);
        ctx.stroke();


    }else if(!canvas){
        console.log('canvasを取得できません');
    }




    return(
        <div className="border border-gray-300">
            <h1>Canvas</h1>
            <canvas id="canvas-in" className="border border-blue-300"></canvas>
        </div>
    );
}

実行結果