[New Plugin Updates] Drawing & Painting Canvas

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:

  1. 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
  2. You can save your canvas as a PNG and upload it to your database
  3. You can download your canvas as a PNG
  4. You can save an in-progress canvas drawing and load it again for editing later
  5. [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

Example in run mode and editor mode.

final_5ea0ed83627ac20015443577_154106
final_5ea0f1ad32e65a00136baa84_731660
final_5ea0ef671bd55e0015be3276_408112

Let me know if you’d like to customize other aspects of the plugin and I can look into it.

Happy Bubbling!
Alex

23 Likes

Hi Alex,

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.

1 Like

Hi @canon – thanks for reaching out!

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!

final_5ee18c820c916d0015be46c9_918933

Alex
TechBlocks

2 Likes

Looks great Alex!

Thanks for the feedback @andersan!

Alex
TechBlocks

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.

Thank you so much.

1 Like

Hi @caeroa thanks for reaching out! Here are the answers to your questions:

  1. You are able to draw a shape and have the fill 100% transparent. Here is a demo of that:
    final_5eee598270f98400152873db_193556

  2. 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:

  3. 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).

  4. 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:
    Screen Shot 2020-06-20 at 11.34.41 AM

Let me know if you have any questions or feature requests!

Alex
TechBlocks

1 Like

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.

thanks.

1 Like

Hey @caeroa – thanks for clarifying the question.

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:

Screen Shot 2020-06-23 at 6.42.38 PM

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!

Best,
Alex
TechBlocks

@alex4 Love the plugin!

Loading does not seem to work? I just get a blank canvas:

I have a saved serialisation in the DB:

Also got a runtime error:

The plugin Drawing & Painting Canvas / element Color Picker threw the following error: anonymous
https://dhtiece9044ep.cloudfront.net/package/run_debug_js/f0a2c0591e12e56945c9265c5168d699d3ae30ed5f52d925169fd9c024ff3c46/xfalse/x6:18:468710
L@https://dhtiece9044ep.cloudfront.net/package/run_debug_js/f0a2c0591e12e56945c9265c5168d699d3ae30ed5f52d925169fd9c024ff3c46/xfalse/x6:18:457367 (please report this to the plugin author)

Hi @philledille – thanks for reaching out! More than happy to take a look at those issues you’re running into. I’ll need a couple of things:

  1. For the serialized canvas that isn’t loading: could you share with me the serialized text?
  2. For the runtime error you’re seeing, can you share with me a link to the issue (and editor if possible)?

Feel free to DM these to me if that works better.

Cheers,
Alex
TechBlocks

1 Like

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:

Here’s an example screenshot of the different font styles on the drawing canvas itself. You can view the run mode demo:
Screen Shot 2020-07-02 at 3.25.42 PM

Happy bubbling,
Alex
TechBlocks

1 Like

Hi Alex,

Thanks for the updates. The color picker still has issues:

Best, Peter

Hi @philledille, I’m looking into the issue and should have a fix for you by early next week. Will keep you posted!

Awesome Alex!

@alex4, I sent you 2 emails regarding the plug-in. Can you look into it. Thanks.

is it possible to delete multiple elements instead of one? for example, “delete selected elements”

@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?

1 Like

Just to make things easier for my users to use the e-board.