This plugin provides a powerful, interactive drawing and annotation element for Bubble, with full support for both web applications and native mobile apps. This dual-platform plugin allows users to perform free-hand drawing, create shapes, add images and text, and manipulate objects on a layered canvas.
Although the end-user features are largely consistent across platforms, the underlying architecture for the web and mobile versions differs. This leads to some important distinctions in implementation and behavior which are outlined in detail throughout this document, particularly in the final chapter.
draw), object manipulation (move), shape creation (shape), straight lines and polygons drawing (lines), erasing (erase), text writing (text) and canvas navigation (zoom).zoom mode) and two-finger pinch-to-zoom (in all modes).These are the properties you can configure in the Bubble editor to control the default behavior and appearance of the canvas.
| Property Name | Type | Default Value | Description |
|---|---|---|---|
| Mode | text |
draw |
Sets the current interaction mode. Possible values: draw, move, shape, lines,erase, zoom. Note: text mode is not supported on mobile. |
| Stroke width (draw) | number |
10 | The width of the brush in pixels when in draw mode. |
| Stroke color (draw) | text/color |
#ACACAC |
The color of the brush in draw mode. Can be a single color (e.g., #FF0000) or a comma-separated list for a gradient (e.g., #FF0000,#0000FF). |
| Stroke gradient direction (draw) | number |
The angle (0-360) of the gradient for the draw stroke. 0 is left-to-right, 90 is top-to-bottom. |
|
| Draw smoothness | number |
0 | A value > 0 simplifies paths by removing points that are closer than this value in pixels, resulting in smoother lines. |
| Eraser width | number |
20 | The width of the eraser brush in pixels when in erase mode. |
| Line style | text |
solid |
The style of the line. Possible values: solid, dashed, dotted, arrows. |
| Edge shape | text |
none |
The shape to be added to the vertices (or ends) of the line. Possible values: none, circle, ring, square, arrow1, arrow2. |
| Edge size | number |
5 | The size in pixels of the selected Edge shape. |
| Stroke width (lines) | number |
3 | The thickness of the lines in pixels. |
| Stroke color (lines) | text |
#ACACAC |
The color of the line's stroke. Supports gradients. |
| Fill color (lines) | text |
#ACACAC00 |
The fill color for closed polylines (polygons). Supports gradients. |
| Shape type | text |
rect |
The default shape to be created in shape mode. Possible values: rect, ellipse, triangle. |
| Stroke width (shapes) | number |
3 | The default border width for new shapes. |
| Stroke color (shapes) | text/color |
#FFFFFF |
The default border color for new shapes. Supports gradients. |
| Stroke gradient direction (shapes) | number |
The angle (0-360) of the gradient for the shape's stroke. | |
| Fill color (shapes) | text/color |
#4B72FF |
The default fill color for new shapes. Supports gradients. |
| Fill gradient direction (shapes) | number |
The angle (0-360) of the gradient for the shape's fill. | |
| Corner roundness | number |
5 | The corner radius in pixels for new rectangles (rect shapes). |
| Shadows | boolean |
false |
If "yes", new objects will be drawn with a shadow based on the following properties. |
| Shadow blur | number |
10 | The blur radius of the shadow in pixels. |
| Shadow offset X | number |
4 | The horizontal offset of the shadow in pixels. |
| Shadow offset Y | number |
4 | The vertical offset of the shadow in pixels. |
| Shadow color | color |
rgba(90,90,90,1) |
The color of the shadow. |
| Selection color | color |
rgba(118,186,242,1) |
The color of the selection box and control handles. |
| Corner size | number |
8 | The size of the control handles on selected objects. |
| Click will select | boolean |
true |
When in move mode, determines if clicking on an object selects it. If no, only already-selected objects can be manipulated. |
| Area selection | boolean |
true |
When in move mode, determines if dragging on an empty area creates a selection rectangle to select multiple objects. |
| Erase only selected | boolean |
false |
If "yes", the eraser will only affect the currently selected objects. |
| Max undo actions | number |
50 | The maximum number of actions to store in the history for undo/redo. |
| Zoom enabled | boolean |
true |
Enables mouse-wheel zoom on web and pinch-to-zoom gestures on mobile. |
| Back to move | boolean |
true |
If "yes", the mode automatically switches to move after creating a new object, allowing for immediate manipulation. |
| Avoid back to move | text |
draw,erase |
A comma-separated list of modes for which to prevent the "Back to move" behavior. |
| Copy paste enabled | boolean |
true |
Enables Ctrl+C / Ctrl+V keyboard shortcuts on web. |
| Draw/erase pointer | boolean |
false |
If "yes", shows a circular cursor representing the brush size in draw and erase modes. |
| Image file width | number |
Sets a specific width in pixels for the logical canvas, affecting the exported image dimensions. If blank, defaults to the element's width. | |
| Image file height | number |
Sets a specific height in pixels for the logical canvas. If blank, it's calculated to maintain aspect ratio or defaults to the element's height. | |
| Background image | image |
Sets a visual-only background image via CSS. This image is not part of the canvas and will not be exported. |