In this tutorial Ray Deck walks through the process of adding the Fabric.js canvas library to a WeWeb application. He starts by explaining what Fabric.js is—a JavaScript library that provides higher‑level drawing and interaction capabilities for an HTML5 canvas. Because WeWeb does not expose a native canvas component, he creates a plain HTML element, inserts a <canvas> tag, and gives it a fixed width and height. To load Fabric.js, he demonstrates two approaches: adding a script tag to the page header (which requires a publish) and, more flexibly, using a WeWeb page‑load workflow that runs custom JavaScript to inject the script via the state‑change embed converter. After the library is loaded, he adds a button component, attaches a click workflow, and writes custom JavaScript that selects the canvas by its ID, creates a Fabric.Rectangle, sets its fill colour, and adds it to the canvas. He shows the result in preview, then modifies the colour to illustrate editing the script. Finally, he uncovers a timing issue: the Fabric.js script loads asynchronously, so code that runs immediately after the load may fail with “Fabric is not defined”. He resolves this by inserting a setTimeout delay (e.g., 1000 ms) before executing the drawing code, effectively waiting for the library to be available. The tutorial ends with a working example where clicking the button draws a coloured rectangle on the canvas, demonstrating how to combine external JavaScript libraries with WeWeb’s low‑code workflow system.
Chapters
Okay, so we have a new challenge to get Fabric.js working with, um, WeWeb. And previously, I had suggested maybe they want to try using the embed converter and said it wasn't quite working for them. So let's see if we can make, uh, the Fabric.js work in WeWeb using the state change embed converter. Uh, first thing we're going to do is learn more about Fabric.js. So let's look up fabricjs.com, and that will, yes, let's look it up. And there's a little library here, page is a little sketchy. We're gonna go over to the GitHub page and see more about Fabric.js. And Fabric.js is a library that allows you to go and execute more control over your HTML5 canvas. Fine. And we'll learn more about it. We have a quick start, and we can do it using plain HTML, which is what we're going to need to do, because in WeWeb, while we have— well, there is Vue, if you go deeper into the code, for the kind of simpler hooks we want to do, we just want to hook it to an HTML element that's gonna be in the WeWeb context. So we're gonna want to be using a canvas element, we're going to need to import their code, and we're going to need to run some proprietary code in order to make all this work. So let's talk about how we do those 3 things. In WeWeb, let's create a new project, and we'll make a new project, Select blank project and we'll call it Fabric JS Test. Create it. We're gonna wait for it to show up. Great. And bring that up. And now we have ourselves a little environment in WeWeb. Now, Fabric uses the canvas element. The canvas element is not native to WeWeb. If I were to go look for canvas, well, obviously not in buttons or labels, so I'm gonna say Canvas, it doesn't know about it. But what it does know about is HTML. So we can take an HTML element, bring it in here, and we can edit the HTML over here. And make that a little bigger. And we can put whatever proprietary HTML we want to in, in WeWeb. So here, the proprietary HTML we're going to need is going to be a canvas element. We're going to copy this. And we're going to go back over here. We're going to say paste that. Great, so now we have a canvas element with a certain height to it and certain width. And this isn't gonna look like anything in particular. We can do a little preview, and the canvas element will be here. We can go inspect and go look for it. But it's invisible because it doesn't have anything drawn onto it. So we're gonna leave it alone for a minute. I think if I were to open this up, yes, here we can see that there's an HTML holder. Which has a canvas element inside that is width of 300, height of 300. All right, but now we want to put stuff into it, and that's where Fabric.js comes into play. Now, in order for us to be importing from Fabric.js, we're going to need their code. And, you know, there are two ways we could bring script tag into WeWeb. One is to, in the page, say the home here, we could add custom code by adding stuff into the header. That will work relatively well, except you gotta publish the app every time in order for it to work. So the other way we like to do it is we like to say trigger workflow, add a workflow, um, and then maybe on app load, nice and early or something, we're gonna add an action, which is going to be custom JavaScript. And then we're going to bring up the state change WeWeb, um, embedder. And we're going to take the script tag from here, right, which says this is— we're getting Fabric, and we're going to come back over here and we're going to paste it. And then when we do that, we get code that we can copy and put into the WeWeb page load action. And so we will go back over to WeWeb, and we will go to the JavaScript code, and we will click this into the page load. And what this will do is teleport the Fabric code into WeWeb, actually inside the context of the editor. That'll make it easy for us to work with. And cool, run a little test on it. Yep, green light. Fantastic, fantastic. Now what we need is something that will then make it run the code that we have defined in here. So the second script that has some arbitrary JavaScript in it. So let's copy that stuff. Let's go back over to WeWeb. Let's try making a new element. We'll make a button. Yeah, make a nice button on this. I don't need to see, so we'll just make a nice little blue primary button, which is sort of the usual thing. Yep, there's click, and that click can have a handler on it. We're going to add a workflow, which is for click, and we're going to run some custom JavaScript because that JavaScript is the code that came from our friends over at Fabric. So we have content. So the idea here is it's going to look for a canvas element that has an ID of canvas, which is the one we created. It's going to make a new rectangle that will be filled with red, and we're going to add that rectangle to the canvas element. And so far, it seems relatively straightforward. It seems like there's a lot more to be done with Fabric, but we'll see what we get. So we will click on close here, and test that. And it says succeeded. Okay, so let's try quickly running this. I suspect this whole thing's not gonna work. So we're gonna just do a little refresh here. Wait for the whole thing to come back. Great. And we still have the HTML up here, and we have that down there. We're gonna click on this, and we're gonna say click. Oh, hey look. So this then is connecting this to, so this event then updated the fabric, the canvas element, to start putting its instructions into it. Let's demonstrate that we have a little more control over this. Let's go into the click me, back in the editor, we'll go into the click me and try this, and we'll say, let's take a look at the action, the custom JavaScript, and you know what, instead of making it red, let's make it purple. And we will say, okay, it looks fine, and close that up, and close. And now one thing we often have to do when we're loading in these external script tags, we gotta refresh the editor in order for it to properly take while we're inside this context. And we say click me. Oh yeah, gotta click on the preview. And it's purple. One thing I will note is that these loads, that when we're doing them, are asynchronous. Now what that means is, Whenever we're saying, please add this element to the page, which is basically what this thing says here. So source, and add body to the page. It will add to the page. It will download the file from the network, and then finally put in the JavaScript. But that means that all this code does is it starts that process. And then a time later, like a few hundred milliseconds later,, it will then work. So that means that the example like we have in here, it just doing it immediately, will not work. Let's demonstrate that for a second. So we're going to copy this and we're going to go back into WeWeb, and we'll go here. And instead of having click me, what we're going to do is say that on the page load, uh, workflows, yep, and the, yep, instead of doing this right here, we're just going to add an action and we're going to say, well, what happens if we just run it immediately afterwards? And run all this JavaScript, like the same stuff we just talked about. Let's see if that works, because sometimes it does and sometimes it doesn't. We will refresh here. Right, and there's no purple box. Basically, I don't think it had time to load in the Fabric, because the Fabric.js hadn't been downloaded from the network and been attached to the web page by the time it was running this other code. Other little piece of JavaScript. So the way that we can kind of fake that and evaluate that kind of problem is I can go back into the trigger workflow and in here and in here, say test. Yeah, it says fabric is not defined. So we can solve that problem relatively straightforwardly. We can say let's wait, setTimeout. setTimeout means please wait a little bit before running the following function. And the first argument's going to be what you want to run, which is sort of done as a function. This way you can have a block of code run later. It says please invoke that function. And then we can say please run it, I don't know, a second later by doing 1,000 milliseconds. So this is often a trick I use to get past things that I know to be fast, but I have to have a little bit of timing. Especially when the other library doesn't really support an event handler or something that I could use to plant a hook to know that it was actually done and loaded. Some libraries do offer that, some don't. And I really don't know where Fetch is on this. So we're just going to say, let's try waiting an arbitrary second and see if that helps. So we will do that, and that, and that. And let's refresh the page. Yeah, now we get the red again. And we got the red again because what happened was it loaded the— it said, let's start loading. We're gonna wait 1 second, and then we're going to say, now let's draw the stuff on the canvas. Because that's what we're doing in here. We're going in, and we're saying, to workflows. And so the first thing we're doing is load fabric.js. And what this does here is just loads fabric.js, which is based on the code we got from the embed converter. And then the second thing that it does is, drawRectangle, which it does by waiting a second, right? And then saying, okay, at the end of that second, we think Fabric's gonna exist. And then it starts to do the rest of the party. By introducing this kind of patience and separation of concern between loading of the data and what you want, you want to, well, loading of the external library and deciding what you want to do with it, that's how we can play on Easy to be able to get some of this cool external library stuff loaded into WeWeb and really make it dance, do all the special things we want to do.
