This Operation is insecure while doing canvas.toDataURL()

[vinayITT]

I am getting a strange error like
This Operation is insecure

Kindly help me out if I am doing anything wrong or might be missing something in code below

import { certificate_img } from '@constants'; //image from project resources folder
import Canvas, { Image as CanvasImage } from 'react-native-canvas';

const canvasHeight = 400;
const { width } = Dimensions.get('window');

const CanvasComponent: React.FC = () => {
    const [isLoading, setIsLoading] = useState(true);
    const canvasRef = useRef<Canvas | null>(null);

    const saveCanvasAsImage = async () => {
        if (canvasRef.current) {
            const canvas = canvasRef.current;
            try {
                const imageData = await canvas.toDataURL(); //here I am getting error
                console.log(imageData);
                if (imageData) {
                    const fileName = 'certificate_image.png';
                    await writeFile(imageData.replace('data:image/png;base64,', ''), fileName);
                }
            } catch (error) {
                console.error('Error generating image data:', error);
                Alert.alert('Error', 'There was a problem generating the image data.');
            }

        } else {
            Alert.alert('Error', 'Canvas is not available.');
        }
    };


    const onLoadCanvas = () => {
        if (canvasRef.current) {
            const canvas = canvasRef.current;
            const ctx = canvas.getContext('2d');
            canvas.width = width;
            canvas.height = canvasHeight;
            const loadedImage = RNimage.resolveAssetSource(certificate_img);
            const image = new CanvasImage(canvas);
            image.src = loadedImage.uri;

            image.addEventListener('load', () => {
                const rectWidth = 400;  // Width of the rectangle
                const rectHeight = 300; // Height of the rectangle
                const x = (canvas.width - rectWidth) / 2;  // Center horizontally
                const y = (canvas.height - rectHeight) / 2; // Center vertically
                ctx.drawImage(image, x, y, rectWidth, rectHeight);
                
            });

            image.addEventListener('error', (e: any) => {
                console.error('Error loading image:', e);
                setIsLoading(false);
            });
        }
    };

    useEffect(() => {

        onLoadCanvas();

        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);


    return (
        <View style={styles.container}>
            {isLoading && <Spinner size={'lg'} style={globalStyles.loading} color={colors.primary} />}
            <Canvas ref={canvasRef} style={styles.canvas} />
            <Button onPress={saveCanvasAsImage} >Save Canvas Image</Button>
        </View>
    );
};