Hi there,
I’m trying to use the HTML5 Canvas with Fabric.js plugin to create a workout recap image feature in my Bubble app — kind of like what Strava does for cyclists.
Here’s what I’m doing:
1. I take a photo using the Native Camera plugin
2. I upload that image to the canvas as the background
3. Then I try to use “Add Text” to overlay:
• Date & time
• Gym name
• Workout routine info (like: Chest Press 60kg 3x10)
Everything (image & text) is stored in custom states and confirmed to be non-empty.
⸻
But I keep getting this error when I run the “Add Text” action:
The plugin HTML5 Canvas with Fabric.js / action Add Text a Fabrics Canvas threw the following error:
anonymous@https://gympick-13710.bubbleapps.io/package/run_js/0d5f2cb83f473f88f6fb508e3c21f6cc1806826af4fc4992e5ea04aff552c4b0/xfalse/x30/run.js:274:334
run_with_error@…/run.js:276:85
What I’ve tried so far:
• Confirmed the background image uploads correctly
• Double-checked all canvas IDs
• Added a 500ms delay after image upload
• Made sure all text values are valid
• Tried Only when conditions to avoid empty text
Still getting the same error.
⸻
What I’m trying to build:
A simple post-workout photo generator — user takes a photo, adds their gym info & workout summary, and exports the image for social sharing.
I’ve attached an example image (not mine) that looks like what I want to achieve.
⸻
Any help would be super appreciated! If I’m missing any required step or setup for using “Add Text,” I’d love to know.
Thanks in advance!
— Tae Kyoung
