MARKETPLACE
PLUGINS
🎨 FABRICJS 2: DRAW & PAINT CANVAS
🎨 FabricJS 2: Draw & Paint Canvas logo

🎨 FabricJS 2: Draw & Paint Canvas

Published June 2023
   •    Updated this week

Plugin details

This plugin allows your users to create images, adding and editing lines, shapes and texts! 🎨👨‍🎨 Develop apps like Figma, Canva, Powerpoint, or Photoshop. 🔴🟠🟡🟢🔵🟣⚫ Or even simpler stuff 😉.
REMEMBER: you can always try the plugin (almost) for FREE before buying it! You can SUBSCRIBE to the plugin and use it for 1 or 2 days. After uninstalling it, you will be charged for a fraction of the price (1/30 if you used it for 1 day). Then you can purchase it if you liked it. 😉







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

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



Modes
- 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

$50

One time  •  Or  $9/mo

4.6 stars   •   18 ratings
1.8K installs
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Cosmic Steve logo
Cosmic Steve
Joined 2020   •   28 Plugins
View contributor profile

Instructions

We encourage you to take a look at the editor & demo page to see how the plugin works:
SIMPLE DEMO: https://cosmic-plugins.bubbleapps.io/simple_drawing?ref=pp
SIMPLE DEMO EDITOR: https://bubble.io/page?type=page&name=simple_drawing&version=live&id=cosmic-plugins

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

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

Types

This plugin can be found under the following types:
Background Services   •   Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:
Productivity   •   Technical   •   Media   •   Customer Support   •   Small Business   •   Visual Elements

Resources

Support contact
Tutorial
Forum

Rating and reviews

Average rating (4.6)

Excellent Plugin
July 16th, 2025
Really nicely put together, very easy to use. Worth every penny.
Best for creating custom design tools / image editors
March 29th, 2025
Love this image editor plugin, Steve is super responsive and helpful. Thanks!!!
Nice pluging
March 14th, 2025
Great plugin, author quickly fixed a bug. I was trying out different image editor plugins on bubble but this is exactly what I needed!
Hello, now by editing the image's height or width via workflow (with the "Set properties of an object" action) the image will be resized instead of cropped, since that was in fact a bug. Now it's fixed! (plugin author)
March 14th, 2025
  •  
Cosmic Steve
Great! Appreciate quick fix - 5 stars!
March 14th, 2025
  •  
Original reviewer
Great plugin, but needs a little tweaking.
February 6th, 2025
Great plugin! But I think I found a problem. When changing the width and height of the selected image and dragging it, the size of the entire image is changed. But when changing the width and height by changing properties, the image is cropped to the size that was passed in the property. It would be great if there was an option to crop the image by dragging with the mouse, but cropping by entering the dimensions doesn't work very well because the user doesn't know exactly how many px they want to crop.
Hello, now by editing the image's height or width via workflow (with the "Set properties of an object" action) the image will be resized instead of cropped, since that was in fact a bug. Now it's fixed! (plugin author)
March 14th, 2025
  •  
Cosmic Steve
Amazing plugin
October 27th, 2024
The best canvas plugin on Bubble! Steve has been incredible with helping set everything up for my app.
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Immerse
Early access
Store
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales