import React from 'react'
import { useRef, useEffect } from 'react';
import Imge from './captcha-background.jpg';
const Canva = (props) => {
const canvasRef = useRef(null);
const [reset, setReset] = useState(0)
useEffect(() => {
if(props.captcha)
{
const canvas = canvasRef.current;
if (!canvas) {
console.error('Canvas reference is not available.');
return;
}
const context = canvas.getContext('2d');
const image = new Image();
image.src = Imge.src;
image.onload = () => {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0, props.width, props.height);
context.font = 'bold 30px sans-serif';
context.fillStyle = '#fff';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.letterSpacing = '20px';
if (props.captcha) {
context.fillText(props.captcha, props.width / 2, props.height / 2);
} else {
console.error('Captcha is not available or invalid.');
}
};
image.onerror = (err) => {
console.error("Error loading the image:", err);
};
}else{
setReset(reset + 1)
}
}, [props.width, props.height, props.captcha, reset]);
return <canvas ref={canvasRef} width={props.width} height={props.height} className='capcha-canva' />;
}
export default Canva