Hey Bubblers, I just made some big updates to “Draw & Paint Canvas” — a flexible drawing plugin you can add to your Bubble app
A few key features:
You can set the “mode” of your drawing canvas to any of the following:
- Free Drawing
- Draw Shapes (Circles, Squares, Triangles, Lines)
- Add Images
- Add Text
You can save your canvas as a PNG and upload it to your database
You can download your canvas as a PNG
You can save an in-progress canvas drawing and load it again for editing later
[Update] This plugin now comes with a custom color picker element, enabling you to set the stroke color, shape color, text color, etc without relying on a different color picker plugin
Great job on the plugin. I’m looking to integrate this or something similar into my site very soon. One quick question, is there a way to delete elements? I like that you can select items, it would be great if a user could hit the delete key and delete any selected items.
Yes, users can currently clear the canvas or delete selected elements. I’ve added an example of the ability to remove an element on the demo page. Below shows how this works.
Let me know if you have any questions or feedback!
Hey @alex4 amazing plugin, I have some questions before buying it .
-is it possible when start to draw a shape, the shape color (fill) be 100% transparent, I get you can pick the start color but not the alpha
is it possible to use a slider input instead of a text input to change the draw/paint stroke width and the shape outline width?
is it possible to remove the icon to insert an image from the menu? (if not I believe its not a big deal, I can just create a shape with the same background color on top of the menu blocking that icon )
and last but not least, is the canvas transparent? if I put in on top of an image or a text or something else it shows whats under? I need it to be transparent.
Hi @caeroa thanks for reaching out! Here are the answers to your questions:
You are able to draw a shape and have the fill 100% transparent. Here is a demo of that:
It is possible to use a slider input instead of text input to change the stroke & outline width. The menu items you see in the demo are all Bubble elements that you can copy over to your own app and customize however you see fit. Here is what it looks like in the Bubble editor:
Yes, you can remove the image uploader in the menu. You can customize the menu elements as you wish, since they are Bubble elements (same as answer in #2 above).
Yes, the canvas background is transparent. You can set it to be whatever color you like via the Background Color properties on the plugin element:
Let me know if you have any questions or feature requests!
Hey @alex4 thank you for the reply, everything is clear but the question 1. What I need is setup the fill color of the shape to 100% transparent since I start to draw, whiteout the need of pick any color or tell it to be 100% transparent, what I mean is make it 100% by default when I start to draw.
Yes, you can set the default fill color of the shape to be whatever you choose via the Element properties. There is a property named “Shape Color (Fill)” that you can set up to be transparent. Here is a screenshot of that part of the element properties:
In order to whiteout the need to pick any color, you can remove the fill color input from the Bubble elements template I provide. Let me know if that helps or if I can clarify anything else!
Hi all, based on a few requests, I just added the ability to customize the font for the text elements you add to the Draw and Paint Canvas plugin. You can do so by changing the standard Bubble font style input on the plugin element here:
@kaventan1 – I replied to your email last week, let me know if you have any other questions! Apologies again for the slower response, I’ve been on vacation with intermittent internet access.
@omarajoor – Users currently cannot delete multiple elements at once; however, I can look into what it’d take to build this feature. Is there a specific use case you’re building for or is this a general UX feature you’d like in the canvas?
