[New Plugin Updates] Drawing & Painting Canvas

Hi @alex4
I wanted to know whether I can add clickable elements to canvas main, so that I can capture the response from the slides.

Hi @jacob6 thanks for reaching out!

You should be able to set up something like this:

Use one of the following states from canvas called:

  • Element Selected?
  • Selected Element IDs

That event will fire when an Element is selected or the Selected Element IDs changes

Hi! Asking for any other users that have implemented this plugin to be used for t-shirt/product designer app? The basic framework is to allow users to add images/texts onto a t-shirt and save an image with all the designs on it (for us to use as preference to product the t shirt)
Would also be great if text font & size can be changed dynamically?

Are these functionalities achievable with this plugin?

@alex4 this is really a great plugin. There is one thing I can’t figure out how to do. When adding a shape to the canvas, I want to be able to grab it without being able to change the size dimension of the shape itself.

You can see my product here: X's & O's | SXS Lacrosse
(I’m duplicating this product for lacrosse: Draw Hockey Drills Online for Free | Easy to Use Drill Drawing Tool)

My hunch is it’s a simple fix. I want to be able to add players, etc, and drag them around without the worry of the the shape changing size.

Thanks!

im in the final 10 yards of getting this plug in to work for my app. loving it so far but have gotten a bit stuck. Is there any documentation around element IDs and how to connect changes on the canvas to changes in the database? When an element is deleted from the canvas, how can I set up a workflow to delete it from a thing in my database?

Hi @alex4 , I’ve just purchased the plugin and I’m receiving the same ‘tainted canvases may not be exported’ error as above. Could you please assist?

1 Like

Unfortunately I’ve emailed Alex and not received any help or a response so far. Still having the same issue as you are

3 Likes

yep. i have some problems with the plugin also and nobody is answering via email. i have multiple problems like: text fonts not working corectly, implementing a zoom function and etc.

2 Likes

i solved it by correcting the background image relating to canva. the value should be 1

1 Like

Hi ,
I’m having an issue with the color picker, i’m following the “canva clone” tutorial and it’s not updating the canvas colour, the canvas turns black and the color picker appears to be working but doesn’t change the BG of the canvas.

Any ideas?

1 Like

I’m also having issues with this now :point_up_2: Had it all working perfecting and since two weeks ago, each time the custom state is changed to enable a different click_mode on the canvas, it clears everything off the canvas. @alex4 could you please fix this? thanks

Thanks @stephan.raz1 - could you please clarify what you mean by ‘value should be 1’? Which value?

Hi @cbrook151179 – I tried reproducing the color issue you reporting with no success. Can you please send me a link to your editor so I can take a look? Here’s what I have: https://fabricjs.bubbleapps.io/version-test/canvas_color


@iaestheticsdeveloper regarding the tainted canvas issue, this is a known issue and something there’s no easy fix for. We’restill looking into this but there’s no clear solution due to standard web CORS protocols.

In the meantime, if possible, you should upload your images via the Bubble image uploader and use those URLs, which are CORS friendly.

Hi Alex,
Thanks, I just sent you a message with links in.

Thanks again.

1 Like

Hi @alex4 , thanks for your reply and transparency.

Hello. I have a question. Can you create shapes based on data in the database? I want to add elements to my board that are based on elements from a table. Is this possible? If so how?

I am trying to understand the issue with the CORS thing - is the following correct?

Do i understand correctly? in other words the images would need to have xxxxxx.bubbleapps.io as their origin to be used? Is there a way to do that?

Appreciate any and all help to understand this. Unfortunately, this is a huge limiter for this plugin if you are looking to annotate anything!

1 Like

Hi Alex,

Is it possible to upload .pdf files?

Ken

@alex4

I’ve got a good use case for this plugin, but would need arrows that are more repeatable than freehand draw. Think a custom line class with either a triangle or arrow lines.

I found this example online that would likely be a good starting point for an implementation.
http://fabricjs.com/cross

Any possibility this could get added to the shapes list?

@ksaitow1 I second the PDF files as a background (although there are other plugins to take a PDF to image and then you could set that to the background image or insert as an image)
http://fabricjs.com/import-pdf

3 Likes

Hey Alex,
have just created a markup tool for mapping drafts using your canvas.

Everything is looking good, except I can’t detect a drawing element after it’s added to the map like the shape event.
I’m using the map modified event, but it’s a bit too broad.

pete