Image is cropped while using streamlit_drawable_canvas

đŸ§© Streamlit Components
1

I am using streamlit_drawable_canvas and have an image as under:

<class ‘PIL.Image.Image’> with width as 1280 and height is 720

I have played with height=200, width=356 and it shows a proportionate image on the canvas as shown below:

image
image752×450 62.4 KB

To double the canvas area, When I use height=400, width=711 and it shows a dis0proportionate and cropped image on the canvas as shown below:

image
image912×942 42.2 KB

canvas_result = st_canvas(
fill_color=“rgba(255, 255, 255, 0)”, # Fixed fill color with some opacity
stroke_width=stroke_width,
stroke_color=stroke_color,
background_color=bg_color,
background_image=my_resized_pillow,
update_streamlit=realtime_update,
height=200,
width=356,
drawing_mode=drawing_mode,
point_display_radius=point_display_radius if drawing_mode == “point” else 0,
display_toolbar=st.sidebar.checkbox(“Display toolbar”, True),
key=“full_app”,
)

How do I get a large canvas size to work on?

2

Hello @Sohil_Patel, and welcome to our community! :wave: If you’re aiming to double the size of the canvas, you might want to consider trying out the following dimensions:

canvas_result = st_canvas(
    fill_color="rgba(255, 255, 255, 0)", # Fixed fill color with some opacity
    stroke_width=stroke_width,
    stroke_color=stroke_color,
    background_color=bg_color,
    background_image=my_resized_pillow,
    update_streamlit=realtime_update,
    height=283,
    width=503,
    drawing_mode=drawing_mode,
    point_display_radius=point_display_radius if drawing_mode == "point" else 0,
    display_toolbar=st.sidebar.checkbox("Display toolbar", True),
    key="full_app",
)

Let me know how it goes

Best wishes,
Charly