Blog

One time, somebody on the forum asked an interesting question about using several Canvas elements on a single page. Back then, I thought “Why would anybody need this?”. But after seeing many well-crafted applications, including ones from the well-known Animagraffs studio, I’m not so sure anymore. If you have doubts, then look into the demo page, for example, at the ISS 3D information graphics.

This intriguing feature provided to us by the Blend4Web developers deserves a close examination.

What’s the Point

If you try to initialize several Canvas elements in your script, you will naturally get an error, as the engine uses lots of its own variables to store operation conditions. This is understandable. So, in such cases, the developers recommend using the “namespace” concept.

Here is the idea of it: user’s web browser, as usual, loads one and only one engine file. However, you also set specific identifiers (namespaces) in your scripts, and these identifiers allow the engine to process your scripts as if they were separate units that work independently from each other.

A Bit of Practice

First, we will have to prepare a place for several Canvases in the HTML body. I will use a standard template that Project Manager generates when we create a new project.

So, here is the task: we need to place two independent Canvas elements on the page. Accordingly, let’s define DIV containers in the HTML file:

And now comes the most interesting part. We only have to set the identifier while initializing the module in the b4w.require function so the engine would know to which namespace the script belongs. However, internal require function calls should not use any identifiers.

In the end, standard code generated by the Project Manager should look like this:

Interaction Between Two Canvases

Let’s take a look at a more complex example, where codes for different Canvas elements can interact with each other. Let’s try to start an animation on the first Canvas with a mouse click in the second Canvas window.

Define the external function “ext_method” for starting animation in the first Canvas code:

In the second Canvas code, define the animation function using require and set the identifier of the Canvas you need as a parameter. Note that in this case the require method is called from the global object b4w:

Thank you so much for great tutorial. I got this error when I run html file.

Uncaught Error: Module "__tbn" not found at b4w.js:201 at b4w.module.__util (util.js:31) at b4w.js:208 at b4w.module.__tsr (tsr.js:29) at b4w.js:208 at b4w.module.__boundings (boundings.js:27) at b4w.js:208 at b4w.module.__batch (batch.js:27) at b4w.js:208 at b4w.module.__anchors (anchors.js:27)b4w.js:201 Uncaught Error: Module "__tbn" not found at b4w.js:201 at b4w.module.__util (util.js:31) at b4w.js:208 at b4w.module.__tsr (tsr.js:29) at b4w.js:208 at b4w.module.__boundings (boundings.js:27) at b4w.js:208 at b4w.module.__camera (camera.js:28) at b4w.js:208 at b4w.module.camera (camera.js:50)b4w.js:201 Uncaught Error: Module "__tbn" not found at b4w.js:201 at b4w.module.__util (util.js:31) at b4w.js:208 at b4w.module.__tsr (tsr.js:29) at b4w.js:208 at b4w.module.__boundings (boundings.js:27) at b4w.js:208 at b4w.module.__camera (camera.js:28) at b4w.js:208 at b4w.module.camera (camera.js:50)

These files are in your SDK. They get used when running the development version of your app. When you build your app, everything gets compiled to one JS file. Have you have moved your dev version to a different directory?