Холст отрисовывается в правильном размере, но холст никогда не заполняется синим цветом, я не понимаю почему?
import React, { useRef } from 'react';
const App = () => {
console.log('this prints just fine');
const canvasWidth = 820;
const canvasHeight = 620;
const canvasRef = useRef<HTMLCanvasElement>(null);
console.log(canvasRef.current) // null
if (canvasRef.current) {
console.log('this never prints!!');
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
if (ctx) {
console.log('this never prints!!');
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
canvas.width = canvasWidth;
canvas.height = canvasHeight;
}
}
return (
<canvas
ref={canvasRef}
width={canvasWidth}
height={canvasHeight}
>
</canvas>
);
};
export { App };
ОБНОВЛЕНИЕ
const App: React.FC = () => {
const canvasRef = useRef<HTMLCanvasElement>(null);
const canvasWidth = 820;
const canvasHeight = 620;
useEffect(() => {
...
Выше решена проблема