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.
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”
To begin, add it to your page.
↔️ The element is fully responsive, the canvas will adapt to the element size.
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
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.
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.
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.
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?
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. Thank you for the suggestion!
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?
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
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.
To begin, add it to your page.
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).
