MARKETPLACE
PLUGINS
DRAW | PAINT | SIGNATURE PAD
Draw | Paint | Signature Pad logo

Draw | Paint | Signature Pad

Published July 2024
   •    Updated this week

Plugin details

A responsive drawing plugin that allows users to paint/drag & draw, add/select shapes and text, dynamically adjust brush size and color, background color, use undo/redo functions, erase parts of the drawing, clear the canvas, save the artwork as an image, and extract an image URL for easy sharing.
       

MAIN FEATURES
➡️ Drag & Draw: Intuitively create shapes and arrows by clicking and dragging to control size and orientation in real-time.
➡️ Easy Rendering : Smoothly renders without resetting the drawing on input change.
➡️ Responsive Design: Adapts to various screen sizes.
➡️ Geometric Shapes: Easily insert Rectangles, Circles, and Triangles with sharp, crisp edges.
➡️ Lines & Arrows: Draw straight lines and directional arrows for diagrams and flowcharts.
➡️ Text Annotations: Add text overlays to your canvas with customizable fonts and colors.
➡️ Object Selection & Styling: Select, move, resize, and delete individual elements. Dynamically change Fill and Stroke colors for selected shapes.
➡️ Layer Management: Organize your drawing by sending objects to the back or bringing them to the front.
➡️ Set Background Image: Add a photo as the background and freely draw over it to highlight or illustrate.
➡️ Dynamic Brush Settings: Adjust brush size and color dynamically for freehand drawing.
➡️ Customizable Background: Choose and change the background color.
➡️ Undo/Redo: Easily correct mistakes. (Customize the no. of steps to undo/redo, for example, up to 50 steps or more).
➡️ Eraser Tool: Erase parts of your drawing without affecting the rest.
➡️ Clear All: Clear the entire canvas with one click.
➡️ Save as Image: Download your drawing as an image file.
➡️ Extract Image URL: Generates an image URL of the drawing, saved in Bubble for easy sharing.
➡️ Fabric.js Integration: Leverages Fabric.js to provide an interactive and flexible drawing experience.

Other Plugins

$20

One time  •  Or  $7/mo

5.0 stars   •   2 ratings
691 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Snipcode logo
Snipcode
Joined 2022   •   27 Plugins
View contributor profile

Instructions

1. Search for drawing_canvas in the elements panel and place it on the page. 2. Set brush size/color and background color.
3. In the workflow, use plugin's actions like undo, redo, etc. for respective buttons.
4. Extract the image url in plugin's state.

Actions:
"undo"
"redo"
"free draw"
"erase"
"clear all"
"download"
"generate image URL"
"draw rectangle"
"draw circle"
"draw triangle"
"add text"
"selection mode"
"update fill color"
"delete selected"
"draw line"
"draw arrow"
"bring to front"
"send to back"


Events:
"is empty"
"is not empty"
"image url is ready"


States:
"image url"
"isEmpty is yes"
"isEmpty is no"


Note: Steps to Generate & Save Canvas Image in DB

📌 Workflow 1: [Save Button Clicked → Generate Image URL]

Event:
When Save Button is clicked

Actions:
1. Element Actions → Drawing Canvas A → Generate Image URL


📌 Workflow 2: [When Drawing Canvas A's image url is ready → Save URL to Database]

Event:
Elements → When Drawing Canvas A's image url is ready

Actions:
1. Data → Make changes to a thing   Thing to change: Current User (or another thing)   Field: Image   Value: Drawing Canvas A's URL



Types

This plugin can be found under the following types:
Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:
Media   •   Small Business   •   Web Scraping   •   Productivity   •   Mobile   •   Visual Elements

Resources

Support contact
Tutorial

Rating and reviews

Average rating (5.0)

Works amazing, author is great!
June 2nd, 2025
The plugin works like a charm, and is super customizable. On top of that, the author is supportive and knowledgeable. Easy buy for any signing or drawing related app feature.
Excellent plugin
May 29th, 2025
Works perfectly for my school app and game app. Very adaptable to my needs.
Bubble