Forum Academy Marketplace Showcase Pricing Features

[New Plugin Updates] Drawing & Painting Canvas

Hi @alex4 , Download button is not working even in the demo page ! it redirect you to new page, can you please review it
Thanks

@alex4 Really awesome plugin, thanks! I’m also hitting this “tainted canvases may not be exported error” after annotating a screenshot that’s been saved to the db in a previous step. Is there any fix on the horizon for this? Thank you
Screenshot 2022-10-13 at 18.49.08

1 Like

Hello. I think I found a bug (or I don’t know how to use it properly), but when I add a shape to the canvas, if I supply a unique ID (taken from Unique ID field of a data type), the new element on the canvas still has a unique id of the form “shape_unique_id_xxxx”. Can you please check if this works?

(Alternatively, how can I retrieve the unique ID of the shape just added? And the unique ID of a shape deleted? I need to track the items deleted from the canvas as well.)

Thanks in advance, Artur

Wow! I just noticed some additional weird behaviour: Switching borders of the canvas to Solid results in the canvas expanding slowly horizontally at runtime. Has anyone else observed it?

@artur.guja thanks for reaching out and sharing this behavior with me! I’m not able to reproduce that issue–could you PM me a link to the editor page where you’re experiencing that?

Hi there,
Two questions:

  1. Can we set the initial canvas size and/or what size should the saved drawing be?
  2. During the saving process, is there any way to split the drawing into 4, and save as 4 drawings (a bit like a jigsaw puzzle or a grid)?
    Many Thanks.
    S

Hi @sonerozenc good to hear from you!

  1. Can we set the initial canvas size and/or what size should the saved drawing be?

Yes, you can set the initial canvas size in multiple ways:

  1. By setting the dimensions on the Bubble editor design tab
  2. Setting the dimensions via workflow action

Does that help answer your question?

  1. During the saving process, is there any way to split the drawing into 4, and save as 4 drawings (a bit like a jigsaw puzzle or a grid)?

Currently, this isn’t supported. Could you share a bit more about your use case?

Best,
Alex

1 Like

Hey Alex,

Super nice to hear from you. Thanks for getting back promptly! :raised_hands:

  1. Ok I will look into those and get back if further qs.
  2. Basically, when an artwork is created on the canvas, I may need to split it into 2, 3, 4 equal parts. Or, basically crop this image and save it. A very simple example would be: Let’s say the canvas is 200x100px. I would like to split this into two and save it as two equal artworks (100x100px). Could you think of a way to do this with your plugin? If not, could you recommend a ‘crop’ plugin?

Thanks again for your time!

Best.
Soner

1 Like

Is there any way to add ‘icons’ into the canvas of Fabric.js, similar to how you add images? Perhaps using Feather Icons plugin, etc? Thanks. S

Hi @sonerozenc thanks for the questions and apologies for the delay–missed this somehow!

It’s possible to add icons to the canvas if you have them saved to your database as images. You’d add them the same way you add images. Does that help answer your question?

Hey @alex4 no worries!
So are you suggesting to download all icons from Feather Icons for example, to a database and use that as a library? I was thinking more like an API or somehow connecting to an existing library.
Perhaps, a bit like how Unsplash is utilised at websites like Notion, Medium, etc. There are examples here: https://unsplash.com/developers
What do you think?

@sonerozenc you should be able to refer to any image URL and add it to the Canvas. So if you have the image URLs from Feather icons (I assume you can fetch those?) then you can add them to the Canvas via the “add image to canvas” workflow action on the plugin.

1 Like

Am I using Bubble API Connector plugin for this sort of setup?

Lol… So I’m building a social media app. I’m going to include this plugin for a gameification novelty to have people post their art. It’s a very tiny piece of the puzzle, but I’m eagerly waiting to see what this community does with this lol.

Has anyone else implemented this into anything public and active?

1 Like

@alex4
Hey Alex, do you have an ETA on completing the support documentation re: the image annotation use case? I can see great potential with the plugin, but can’t get it working correctly. Also seeing error messages on the demo page. See problems here - [New Plugin Updates] Drawing & Painting Canvas - #319 by bennymac1. Any suggestions?
Thanks!

Hi Alex,
I sent you a mail on dec 12 and also on dec 22. Could you please come back to me, in particular could you quickly fix the bug related to the forward / backward workflows

Thank you
Best
Etienne

Loving this plugin - thanks for the work and all of the support.

My use case is focused on annotating images. I have all of the core functionality up and running. The issue I am running into is that after annotating and then saving an image, the result is a bit blurry/grainy.

Before Annotation

After Annotation (Before Saving)

After Saving

I wonder if there is anything I can do to sharpen the picture (especially with text) that gets saved?

Not the end of the world, but the degradation in quality is noticeable (especially when there is more than one text annotation).

Any recommendations would be much appreciated.

Thank you!

Ken

Hey Ken,

Thanks for reaching out and for the kind words about the plugin! With regards to increasing the resolution, I’m not sure if there’s an easy fix here. Have you tried increasing the overall size of the canvas (scaling the inside) and saving it as an image? This might increase the resolution.


@troy.roberge

Lol… So I’m building a social media app. I’m going to include this plugin for a gameification novelty to have people post their art. It’s a very tiny piece of the puzzle, but I’m eagerly waiting to see what this community does with this lol.

Depending on what the requirements of the puzzle feature you’re looking for are, you should be able to build something along those lines. The plugin is highly flexible and you can create features to emulate apps like Canva. Here’s a tutorial that shows some of the key functionality:


Am I using Bubble API Connector plugin for this sort of setup?

@sonerozenc you do not need to use the Bubble API connector for this plugin

2 Likes

Thanks @alex4 , I will check how it works.

1 Like

@sonerozenc sounds great! Don’t hesitate to reach out if you have questions