[New Plugin Updates] Drawing & Painting Canvas

Update v1.44.0: Added ability to add corner roundness to rectangles on canvas element

Hey all, I’ve added the ability to add a corner roundness (radius in px) for rectangle shapes from the design tab. This does not apply to Ellipses, Lines, or Triangles. I’ve also fixed the corner roundness property on the workflow action side that was not registering the roundness (thanks @taejun for reporting that bug). Enjoy!

Best,
Alex

Hi @alex4
I am a big fan of your wonderful plugins, having used them for over 6 months.

I am using it in the education field and I have one feature to request.

It is the eraser function.

I’m currently using the selection tool to select and delete strokes, but I’m finding it difficult to selectively delete strokes that I’ve drawn freehand.
Especially for children, it seems to be a difficult operation.

Ideally, I would like to have an eraser tool that behaves as follows

  1. Select the eraser tool
  2. Trace the canvas with the Eraser tool.
  3. only the strokes touched by the eraser tool will be deleted.

Thank you very much!

1 Like

Hi @t-mizuta thanks for reaching out! I’m so happy to hear that you’ve enjoyed using the plugin and that it’s been helpful for your use case.

I’ll message you via PM to follow up on your inquiry.

Hey,

This JavaScript Image Editor / Canvas has a lot of cool features, like eraser, blur parts, add filters, etc…, also, it is very smooth.

I think @alex4’s plugin should give some more features, like a simple png download, eraser, and locking an image.

Enjoy :slightly_smiling_face: :computer:

Awesome plugin!
I see that a person can delete elements pressing “backspace” on keyboard

But I miss a button so the user can delete elements, It would be very useful in case a person is drawing on mobile

Currently, I don’t think that a person on mobile will be able to delete elements

http://forum.bubble.io/t/plugin-similar-to-powerpoint/100856/11?u=technoswift

1 Like

@technoswift – thanks for the kind words! Yes it is possible to upload an image onto the canvas from your computer or from S3 storage (you just need the URL but make sure CORS is set to “true” if that is the case)

1 Like

Hi @alex4,
Can we add cliparts / icons and change the colors on the canvas as we do for shapes.
we want to provide graphics/ clipart options to our users so that they can create posters.

  1. Select Background image / color
  2. Add icons / cliparts / graphics (colors change as shapes)
  3. Add image
  4. Add text
  5. Draw free hand
  6. Add shapes

Thanks
Nittn

1 Like

Hey Nittn,

Can we add cliparts / icons

Yes, you can do so by using the “add image to canvas” feature – you’ll just need to have the URL or file for your images

and change the colors on the canvas as we do for shapes.

Are you asking about changing the color of the images or shapes? If you’re asking about images, you cannot change the color of the image, since it should be a file type

Don’t hesitate to reach out if you have any other questions!

Best,
Alex

Hey Alex,
Can you add color change feature to .png file type or Icons like we change color or shapes.
Thanks
Nittn

Is it possible to have the ability to download as svg??

Howdy Alex, big fan of your plugins! I’ve been integrating your plugin into my app over the past few weeks. Do you have any plans to update this plugin to support Bubble’s new responsive engine? Doing so will unlock all the power and flexibility the new engine brings for this plugin.

1 Like

@talenttoo — thanks for reaching out! I will look into what it takes to implement download as svg and keep you posted.

@li1 — thanks for the kind note. Happy to hear the plugin has been useful for you. I am currently working to update all the plugins to ensure they work properly with the new responsive engine. Will post and update note here as that is confirmed and ready!

2 Likes

@alex4 Fantastic, looking forward to the updates!

1 Like

Hello,

I’m interested in how you’re using this plugin to annotate a video. Would you be willing to share a few tips? We could really use this functionality. Thanks!

Hi. Great plug-in. How do we set this CORS value? I didn’t understand the page you linked to. Thanks!

Hello. Great plug-in. I’m wondering if it’s possible to add a function to get a selected object’s X and Y coordinates. Currently you can get their widths only. Reason for asking: I’d like the ability to add text at the location of a selected object. Is this possible?

I use video.js plug-in for the video and would pause it at critical times if I wished. Used this plugin with a transparent background, over the video element. Used a button to continue and pause the video when needed (Actually right click element)

1 Like

Hi @alex4,

Do you have a plan to add the features listed below? I’m needing this capability for what I’m building.

Also, is there a workflow to select multiple elements at the same time so they can easily be moved together?

@alex4 +1 to this, I’m loving the plugin so far, I think getting and saving the selected element X & Y coordinate to the database would be very helpful especially when you want to add text or images in a specific place dynamically.

1 Like