How can I write on the picture

Question

I have a small card that contains a picture and I want to write on the picture, how can I do that

import React from "react";
import {
    Box, Image, Badge, Text, Stack,
    useColorMode, Button, Flex, Spacer
}
    from "@chakra-ui/react";

const InterestCard = () => {

    // Hook to toggle dark mode
    const { colorMode, toggleColorMode } = useColorMode();

    return (
        
            <Box w="130.7px" rounded="20px"
                h='125.04px'
                overflow="hidden"  mt={10}>
                <Image src="https://media.geeksforgeeks.org/wp-content/uploads/20210727094649/img1.jpg"
                    alt="Card Image" boxSize="300px">
                </Image>

            </Box>
     
    );
}

export default InterestCard;

Can you please explain what you mean by **Write on Picture**? and explain show the current and expected output so that it's easy to understand what you're looking for. — Vijay Hardaha, Oct 14 '22 at 00:21
You could overlay a canvas element on the picture; here's a link on how to draw on a canvas. https://stackoverflow.com/questions/2368784/draw-on-html5-canvas-using-a-mouse I assume that's what you mean by "draw." — jjroley, Oct 14 '22 at 00:24

How can I write on the picture

0 Answers0