Hi @max6 – currently it’s not possible to do this, although I can look into it. Would you imagine that it would just be a straight line back to the origin?
Best,
Alex
Thanks for the reply @alex4. That is exactly what I was thinking about.
@max6 – I will consider it an let you know if I prioritize it
I sent you a DM. Please help.
Hi @alex4 , have you seen my message? Would really appreciate your help here! Thx
1 Like
Hi @zeta1119 – thanks for reaching out.
You can set an image to the center of the Canvas when you add it to the Canvas. For instance, if your Canvas is 200px wide and 200px high and your image is 10px by 10px, you should add it to and x and y location of 200px/2 - 5px = 95px in your workflow action. Does that make sense?
Alex
Hi @alex4 - Looking forward to adding your plugin to my app very soon. A few questions.
-
How to make the canvas responsive? Your demo seems not to adapt for various screen sizes. What’s the best way to handle having it be full-width on tablets and below, and set a max width above that?
-
Would there be any way to have the image icon trigger a dropdown with a list of standard images for people to insert?
-
I’ll be using this in conjunction with text input fields, and I would like to have a single save button to send all inputs including the image to corresponding fields in a single data record. Possible?
-
I see it’s possible to change the background canvas color for everyone in the settings, but is there any way to give users the ability to change it?
(I’m just getting started with Bubble, so forgive me if I should know how to handle some of these. If that’s the case, maybe just point me in the right general direction in Bubble documentation will be fine. )
Thanks for your help!
Looking again, the demo seems responsive now. Not sure what was going on before. I’ll have to play around with it a bit more. Still hoping for input on the other questions. Thanks!
Hey Joe, thanks for reaching out and welcome to the Bubble community 
Yes, the demo should be responsive. Let me know if you notice otherwise. To answer your other questions:
-
Yes, it would be possible to have the image icon trigger a dropdown – you would build this yourself in the Bubble editor. The canvas menu (with the image icon) is just a template that I created using standard Bubble elements that you can customize as you see fit.
-
Hmm I’m not sure I understand what you mean by this one. You can have multiple text and image upload inputs and one workflow action to add those to the canvas in one go. Let me know if that doesn’t answer your question!
-
Yes, the background color is dynamic, so you can refer to a color input’s value so that users can customize it!
Don’t hesitate to reach out with other questions and/or feedback!
Alex
Thanks, @alex4 ! I’ve got a lot to learn, and it seems like your plugin will be a great way to get to learn how to work with functions like dropdowns and such.
Thanks for your answers. I’m hopeful that I’ll be able to figure it out. Following up on Question #3: I’m attaching a wireframe to show what I mean.
I’d like to have the single save button to capture (or update) the two text inputs plus what the user has drawn. But your canvas seems to have its own, separate save function. … Let me think out loud here for a sec. I’m guessing I can go into your workflow for the save functionality and just insert those steps into the workflow for the main save button, right? Or something along those lines?
1 Like
That explanation is helpful!
Yes, the demo page for this plugin is modifiable, meaning you can insert your workflow actions into the template save button’s workflow actions. Hopefully that’s helpful!
Alex
Hi @alex4 , great plugin! I am using it to provide writable documents on ipad - is there a way this plugin can have a feature like palm-rejection? I mean we want it to only record strokes when made with pencil - when touched with finger we want it to ignore the touch and scroll the page like a normal touch would do. I am a developer myself, and I think this would be possible with event’s Touch.radiusX and Touch.radiusY property - and your plugin could provide a new property for the canvas element called “Minimum Touch Radius” or something.
Would love to hear your thiughts on this, thank you!
1 Like
Hi @ehr.nucleon great to hear about your use case and thanks for reaching out!
I’ll look into your palm-rejection request and get back to you this week.
Alex
Hi @alex4 thanks for looking into it. I have managed to do such a thing with the following snippet (run this snippet after a page with canvas is loaded):
layer = document.createElement('div');
layer.setAttribute('style', 'cursor: crosshair; display: block; background: transparent; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 999999;');
upperCanvas = document.querySelector('.upper-canvas');
upperCanvas.after(layer);
function pp(event)
{
if('touchstart' === event.type && event.touches[0].radiusX > 10)
{
return;
}
let new_event = new event.constructor(event.type, event);
upperCanvas.dispatchEvent(new_event);
}
layer.addEventListener('touchstart', pp);
layer.addEventListener('touchmove', pp);
layer.addEventListener('touchstop', pp);
layer.addEventListener('mousedown', pp);
layer.addEventListener('mousemove', pp);
layer.addEventListener('mouseup', pp);
Basically it is a transparent layer on top of your canvas, passing all events to the canvas. It ignores the touchstart event where the touch radius is > 10, which is most likely a finger/palm touch, thus effectively preventing “start” of a stroke.
So if you could just do this in your plugin’s code itself it would be great so the plugin would ignore any touchstart events with a radius largen than what’s specified (that setting can be given as a bubble property of the canvas element).
Also on a side request, if it would be possible to have the width/height of the canvas element dynamically in bubble it would be a reall great feature. Basically we are trying to provide a writable document service where the use can upload an image of their letterpad that can be used as canvas background while writing with an apple pencil. I know how to add image into canvas but with a fixed height/width of the canvas it is not very easy to fit a user-uploaded image perfectly. So if the height/width properties on canvas elements are made dynamic, OR if there is a workflow action such as change canvas's dimentions it would really be great.
Again thanks a lot for this great plugin! Have a good day 
Jay
2 Likes
Hey @ehr.nucleon thanks for the extra info!
I’ll take a look into the snippet you sent over and probably add it to my backlog to finish next week!
Best,
Alex
2 Likes
New update in v1.31.4
When saving the canvas to .png and uploading to AWS, you can now customize the file name. This is a new field in the workflow action when saving the image to .png.
Alex
1 Like
New update in v1.32.0
Often when creating a drawing/graphic on the plugin, you might want to flip shapes, images, drawings horizontally or vertically. There are now two new workflow actions called “Horizontally Flip Selected Element” and “Vertically Flip Selected Element”! Let me know if you have any questions as you test that feature out.
Don’t hesitate to reach out with feedback!
Alex
Can this plugin draw bounding boxes based on coordinates ?
Hi @redvivi – thanks for reaching out!
I’m not sure I completely understand the question. You can create a “box”/“square” based on X and Y coordinates + height and width in pixels. You can also specify the fill and outline color as well as corner roundness of the box.
Alex
Great ! Do the element accept these coordinates as parameters to programmatically draw ?