Drawable canvas

@andfanilo, thank you for your prompt response.

I used the demo here:

I guess it’s yet to be updated.

Btw, that icon makes me think it’s download button :grinning_face_with_smiling_eyes:, so I never try it.

1 Like

Hi @andfanilo , actually I use it locally. By modifying the


I do not see a significant difference. I just find it strange that it has significant lag in contrast with the your demos. Regarding the Session State, is there any example showcasing its use for the canvas?

Hello! Thank you for providing Streamlit and guidance on how to use it, this package has really been a game-changer!
My question is about the centering of the images drawn in the drawing pad:
When I use the simple canvas method:

canvas_result = st_canvas(
fill_color=“rgba(255, 165, 0, 0.3)”,
# width = 150,
height= 150,

I draw the image in the center; however, when I go to look at the image which I drew, it looks like this:

I should also mention I am using keras to reshape the data into to the size (600,600).

The goal was to make an app in which you could draw faces, and predict the emotions of the drawings; however, I don’t want the image to be split like this if the user decides to draw the image in the center of the drawing pad, which is the most likely place they will draw it.

If I draw slightly off to the right or left I get a centered image:

Hello @Paul_Fentress,

Hmmm that is odd.

  • When you st.image(canvas_result.image_data) what do you see?
  • Can you write the method you are using to reshape the image?
  • If you want you can put width=600 and height=600 to the st_canvas call, so your image already has the correct size.

That looks super cool, looking forward to the result!

Have a nice Streamlitin’ :balloon:

Hey Fanilo,
Thanks for the quick response!
I set the width and height to an already square shape like you suggested:

canvas_result = st_canvas(
width = 300,
height= 300,

By doing this I am no longer reshaping the incoming data, and I get nice square images. Here are some examples of what I got after the images were augmented for training purposes, and this is exactly what I was trying to get:

This issue is resolved.

Thank you!

1 Like

Hi @andfanilo , I’m using st_canvas but i cant display correct image (1080x1920). Please help me !!!

Thank you!! ^^