Can you draw with Streamlit?

Using Streamlit
1

Can you draw on a canvas using Streamlit? Especially draw according mouse events.
https://matplotlib.org/3.1.1/users/event_handling.html

2

Hello @cysmith, welcome to the forums !

This is not natively supported by Streamlit but should be possible using the incoming custom components in that you could expose a HTML canvas and return the content as a numpy array on mouse release.

If you’re interested to join in creating/testing some of those you’re welcome to join :wink:

1 Like
3

Hi, I’m also interested in drawing with Streamlit! Any updates?

4

Hi @moskomule, welcome to the community,

Yes now you can with this awesome component developed by @andfanilo , https://github.com/andfanilo/streamlit-drawable-canvas

You can also use bokeh for this if your app is already using this plotting lib,

from bokeh.plotting import figure
from bokeh.models import FreehandDrawTool

import streamlit as st


p = figure(x_range=(0, 10), y_range=(0, 10), width=400, height=400)

renderer = p.multi_line([[1, 1]], [[1, 1]], line_width=1, alpha=0.4, color='red')

draw_tool = FreehandDrawTool(renderers=[renderer], num_objects=99999)
p.add_tools(draw_tool)
p.toolbar.active_drag = draw_tool

st.bokeh_chart(p)

Hope it helps!

1 Like
5

Thank you! Super easy and impressive!