Forum Academy Marketplace Showcase Pricing Features

🎨 New plugin! Cosmic Canvas: Drawing & Painting

Showcase Plugins
#1

Hello Bubblers!
We are proud to announce our new plugin: Cosmic Canvas: Drawing & Painting

This plugin lets you create any kind of drawing application: it lets you easily recreate apps similar to Figma, Canva, Paint, Illustrator, Powerpoint, or Photoshop.

1898×901

SIMPLE DEMO: https://cosmic-plugins.bubbleapps.io/version-test/simple_drawing
SIMPLE DEMO EDITOR: https://bubble.io/page?name=simple_drawing&id=cosmic-plugins

–

ADVANCED DEMO: https://cosmic-plugins.bubbleapps.io/version-test/drawing
ADVANCED DEMO EDITOR: https://bubble.io/page?name=drawing&id=cosmic-plugins

–

PLUGIN PAGE: https://bubble.io/plugin/cosmic-canvas-drawing–paint-1685356495439x174762844410347520

–

What you can do

  • Draw anything in free drawing mode
  • Add shapes like rectangles, ellipses and triangles
  • Create text elements
  • Add images
  • Erase
  • Zoom
  • Move elements and resize them

Features

  • Undo / redo any action
  • Any element can be modified after being created. Change fill and stroke values, position, rotation, text alignment or font, opacity and many other features
  • Apply beautiful gradients to free drawing elements and shapes
  • Manage elements (layers) in a Photoshop / Figma style and change the drawing order, or hide them
  • Export files in JPEG or PNG format
  • Access the serialized canvas at any time
  • Customize the canvas with tons of options

How to use it

When you install the plugin, you will see a new element in the left side of bubble editor, named “Canvas”

:art: To begin, add it to your page.

↔️ The element is fully responsive, the canvas will adapt to the element size.

:sparkles: You can now customize the canvas’ properties with the element inspector. Every property is fully documented. You will find the instructions in the element inspector, at the beginning of any section, or below any property (just click the text “show documentation” that will appear below the property field).

We can’t wait to get your feeback!!
Happy nocoding to everyone

3 Likes
Image Markup/Annotation?
#2

really cool!

2 Likes
#3

Thank you @doug.burden ! :grinning:

1 Like
#4

Looks amazing. It would be great to set height & width of the canvas, landscape, etc. Also, center and aligning images and shapes would be a great touch.

#5

Hi!

Do you have any idea how to export images from canvas by layer in this plugin? Or may be you will take a look on this idea to implement it?

As well as above fiche would like to suggest ability to store this images in app itself, not only export to download :slight_smile:

Will be great!

#6

Hello @alissa.prinsloo , right now you could achieve that by managing the visibility of each layer, since only the visible layers are going to be exported.

Maybe in a future release we could use a field in the export action to select a set of layers directly. :v:

1 Like
#7

Thanks for short reply!

#9

Hello,

Two questions.

  1. Is there a way to save an image, drawing, text to the database vs just exporting it with the plugin? Can’t seem to figure it out using the typical create/make a thing in the database.

  2. Is there a way, using the text mode, to set the value for the text before clicking in the canvas area. To elaborate, when clicking it says “type here” can the default of that be changed?

#10

Hello @Builder125 ,
you could create a thing in the database that has a text field. After that, you can store the canvas state “serialized canvas” into that text field. The serialized canvas is a text representation of the canvas content, that you can load in another canvas using the action “Upload serialized canvas”.

I’ll add the default text in the next release. :slight_smile: Thank you for the suggestion!

#11

I will try this and I will get back to you.

#13

Hello @Builder125, we have released a new update of the plugin.
You can now set the default text for any new textbox. :v:

#14

Thank you

#15

I want to find a way to use this in my app. This is sick!

#16

Thank you man! :star_struck:

#17

Actually, it might be useful also as a signature pad, being super customizable with respect to other signature pad plugins.

Check this example page for more ideas: https://cosmic-plugins.bubbleapps.io/version-test/simple_drawing

#18

Hi
Fantastic App I am currently using Fabric JS the issue I have with this Plugin is it does not show Images set dynamically to point to the URL
Is this achievable using this Plugin?

#19

Ok I have installed the plugin how do I add images there is no ref to image in the “mode” option
any help with this matter would be greatly appreciated

#20

Hello @sales15 , thank you for your nice words! :slight_smile:

You can add an image to the canvas with the action “Add an image to a canvas”. In the action fields you can specify the size and the position of the image.

#21

Thank you for your reply
is there work around to view images URLs other than individually uploading I have 20k images

#22

Hi
Any update to the previous question